@vuu-ui/vuu-ui-controls 4.0.0-alpha.18 → 4.0.0-alpha.19

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.18",
+  "version": "4.0.0-alpha.19",
   "description": "VUU UI Controls",
   "main": "./src/index.js",
   "author": "heswell",
@@ -11,16 +11,16 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.18",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.18",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.18"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.19"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.18",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.18",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.18",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.18",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.18",
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-popups": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.19",
     "@salt-ds/core": "1.67.0",
     "@salt-ds/icons": "1.16.0",
     "@salt-ds/styles": "0.2.1",

package/src/time-input/MaskedInput.js

@@ -1,35 +1,78 @@
-import { EventEmitter, createSyntheticEvent, decrementTimeUnitValue, incrementTimeUnitValue, isValidTimeString, updateTimeString, zeroTime, zeroTimeUnit } from "@vuu-ui/vuu-utils";
-const NullSelection = {
-    end: null,
-    start: null
-};
-const FullSelection = {
-    end: 0,
-    start: 8
+import { EventEmitter, createSyntheticEvent, decrementTimeUnitValue, incrementTimeUnitValue, normaliseTimeString, updateTimeString, zeroTime, zeroTimeMillis } from "@vuu-ui/vuu-utils";
+const unitSpec = {
+    hours: {
+        start: 0,
+        length: 2,
+        max: 23
+    },
+    minutes: {
+        start: 3,
+        length: 2,
+        max: 59
+    },
+    seconds: {
+        start: 6,
+        length: 2,
+        max: 59
+    },
+    milliseconds: {
+        start: 9,
+        length: 3,
+        max: 999
+    }
 };
-const CursorAtEnd = {
-    end: 8,
-    start: 8
+const secondsUnits = [
+    "hours",
+    "minutes",
+    "seconds"
+];
+const millisecondsUnits = [
+    ...secondsUnits,
+    "milliseconds"
+];
+const invalidClassName = "vuuTimeInput-invalid";
+const isValidUnitValue = (unit, value)=>{
+    const { length, max } = unitSpec[unit];
+    return value.length === length && /^[0-9]+$/.test(value) && parseInt(value) <= max;
 };
 class MaskedInput extends EventEmitter {
     #controlled = false;
     #input = null;
     #isFocused = false;
-    #isIncrementalChange = false;
+    #milliseconds;
     #selectionStart = -1;
     #selectionEnd = -1;
+    #units;
     #value;
-    #unitSelected;
-    #halfUnitSelected;
-    constructor(defaultValue, inputEl = null){
+    #selectedUnit;
+    #digitIndex = 0;
+    constructor(defaultValue, inputEl = null, { milliseconds = false } = {}){
         super();
+        this.#milliseconds = milliseconds;
+        this.#units = milliseconds ? millisecondsUnits : secondsUnits;
+        this.#value = this.normalise(defaultValue) ?? this.zeroValue;
         if (inputEl) this.input = inputEl;
-        this.#value = defaultValue ?? zeroTime;
+    }
+    get milliseconds() {
+        return this.#milliseconds;
+    }
+    get zeroValue() {
+        return this.#milliseconds ? zeroTimeMillis : zeroTime;
+    }
+    get length() {
+        return this.#milliseconds ? 12 : 8;
+    }
+    normalise(value) {
+        return normaliseTimeString(value, this.#milliseconds);
     }
     set input(el) {
-        if (this.#input) throw Error("MaskedInput cannot be reused, create a new instance for a new input");
+        if (el === this.#input) return;
+        this.#input?.removeEventListener("change", this.emitSyntheticChangeEvent);
         this.#input = el;
-        el.addEventListener("change", this.emitSyntheticChangeEvent);
+        if (el) {
+            el.addEventListener("change", this.emitSyntheticChangeEvent);
+            if ("" !== el.value && el.value !== this.#value) el.value = this.#value;
+        }
     }
     emitSyntheticChangeEvent = (e)=>{
         const syntheticEvent = createSyntheticEvent(e);
@@ -58,33 +101,46 @@ class MaskedInput extends EventEmitter {
     set selectionEnd(value) {
         this.#selectionEnd = value;
     }
+    nextUnit(unit) {
+        const index = this.#units.indexOf(unit);
+        return this.#units[Math.min(index + 1, this.#units.length - 1)];
+    }
+    previousUnit(unit) {
+        const index = this.#units.indexOf(unit);
+        return this.#units[Math.max(index - 1, 0)];
+    }
+    get firstUnit() {
+        return this.#units[0];
+    }
+    get lastUnit() {
+        return this.#units[this.#units.length - 1];
+    }
     setValue(value) {
-        if (!this.#controlled) {
-            this.#isIncrementalChange = false;
-            this.#value = value;
-        }
+        if (!this.#controlled) this.#value = value;
         if (this.#input) {
             this.#input.value = value;
             this.#input.dispatchEvent(new Event("change", {
                 bubbles: true,
                 composed: true
             }));
+            if (this.#controlled) this.#input.value = this.#value;
         }
     }
+    getUnitValue(unit) {
+        const { start, length } = unitSpec[unit];
+        return this.#value.slice(start, start + length);
+    }
     setUnitValue(unit, value) {
-        const newTimeString = updateTimeString(this.#value, unit, value);
-        this.setValue(newTimeString);
+        const newValue = updateTimeString(this.#value, unit, value);
+        this.setValue(newValue);
     }
-    getUnitValue(unit) {
-        switch(unit){
-            case "hours":
-                return this.#value.slice(0, 2);
-            case "minutes":
-                return this.#value.slice(3, 5);
-            case "seconds":
-                return this.#value.slice(6, 8);
-            default:
-                throw Error(`[MaskedInout] invalue unit ${unit}`);
+    setInvalid(invalid) {
+        if (this.#input) if (invalid) {
+            this.#input.classList.add(invalidClassName);
+            this.#input.setAttribute("aria-invalid", "true");
+        } else {
+            this.#input.classList.remove(invalidClassName);
+            this.#input.removeAttribute("aria-invalid");
         }
     }
     get value() {
@@ -92,188 +148,152 @@ class MaskedInput extends EventEmitter {
     }
     set value(value) {
         this.#controlled = true;
-        this.#value = value;
-        if (this.isFocused) {
-            const isIncremental = this.#isIncrementalChange;
-            this.#isIncrementalChange = false;
-            requestAnimationFrame(()=>{
-                if (isIncremental) this.restoreSelection();
-                else this.advanceSelection();
+        const normalisedValue = this.normalise(value);
+        if (void 0 !== normalisedValue && normalisedValue !== this.#value) {
+            this.#value = normalisedValue;
+            if (this.isFocused) requestAnimationFrame(()=>{
+                this.restoreSelection();
             });
         }
     }
     clear(unit) {
-        if (this.#input) {
-            let newValue = this.#value;
-            if ("hours" === unit) newValue = zeroTimeUnit.concat(this.#value.slice(2));
-            else if ("minutes" === unit) newValue = this.#value.slice(0, 3).concat(zeroTimeUnit).concat(this.#value.slice(5));
-            else if ("seconds" === unit) newValue = this.#value.slice(0, 6).concat(zeroTimeUnit);
-            if (newValue !== this.#value) this.setValue(newValue);
-        }
+        if (this.#input) this.setUnitValue(unit, "0".repeat(unitSpec[unit].length));
     }
-    select(unit, halfUnit = false) {
-        if (this.#input) {
-            const offset = halfUnit ? 1 : 0;
-            if ("hours" === unit) {
-                this.selectionStart = this.#input.selectionStart = 0 + offset;
-                this.selectionEnd = this.#input.selectionEnd = 2;
-            } else if ("minutes" === unit) {
-                this.selectionStart = this.#input.selectionStart = 3 + offset;
-                this.selectionEnd = this.#input.selectionEnd = 5;
-            } else if ("seconds" === unit) {
-                this.selectionStart = this.#input.selectionStart = 6 + offset;
-                this.selectionEnd = this.#input.selectionEnd = 8;
-            }
+    select(unit, digitIndex = 0) {
+        if (this.#input && this.#units.includes(unit)) {
+            const { start, length } = unitSpec[unit];
+            this.selectionStart = start + digitIndex;
+            this.selectionEnd = start + length;
             this.#input.setSelectionRange(this.selectionStart, this.selectionEnd);
-            if (halfUnit) {
-                this.#halfUnitSelected = unit;
-                this.#unitSelected = void 0;
-            } else {
-                this.#halfUnitSelected = void 0;
-                this.#unitSelected = unit;
-            }
+            this.#selectedUnit = unit;
+            this.#digitIndex = digitIndex;
         }
     }
     removeSelection() {
-        this.#selectionStart = this.selectionEnd = 8;
-        this.#unitSelected = void 0;
-        this.#halfUnitSelected = void 0;
+        this.selectionStart = this.selectionEnd = this.length;
+        this.#selectedUnit = void 0;
+        this.#digitIndex = 0;
     }
     restoreSelection() {
-        if (this.#unitSelected) this.select(this.#unitSelected);
+        if (this.#selectedUnit) this.select(this.#selectedUnit, this.#digitIndex);
     }
-    advanceSelection() {
-        if (this.#unitSelected) this.select(this.#unitSelected, true);
-        else if ("hours" === this.#halfUnitSelected) this.select("minutes");
-        else if ("minutes" === this.#halfUnitSelected) this.select("seconds");
-        else if ("seconds" === this.#halfUnitSelected) this.select("seconds");
-        else throw Error("unreachable code, in theory");
+    selectFirst() {
+        this.select(this.firstUnit);
+    }
+    selectLast() {
+        this.select(this.lastUnit);
     }
     moveFocus(direction) {
-        if ("right" === direction) {
-            if ("hours" === this.#unitSelected || "hours" === this.#halfUnitSelected) this.select("minutes");
-            else if ("minutes" === this.#unitSelected || "minutes" === this.#halfUnitSelected) this.select("seconds");
-            else if ("seconds" === this.#unitSelected || "seconds" === this.#halfUnitSelected) this.select("seconds");
-        } else if ("seconds" === this.#unitSelected || "seconds" === this.#halfUnitSelected) this.select("minutes");
-        else if ("minutes" === this.#unitSelected || "minutes" === this.#halfUnitSelected) this.select("hours");
-        else if ("hours" === this.#unitSelected || "hours" === this.#halfUnitSelected) this.select("hours");
-        else {
-            const selection = this.getSelection();
-            if (selection === CursorAtEnd) this.select("seconds");
-        }
+        const unit = this.#selectedUnit;
+        if (unit) this.select("right" === direction ? this.nextUnit(unit) : this.previousUnit(unit));
+        else if ("right" === direction) this.selectFirst();
+        else this.selectLast();
     }
     pasteValue(value) {
-        this.#halfUnitSelected = void 0;
-        this.#unitSelected = void 0;
-        this.#value = value;
+        const normalisedValue = this.normalise(value.trim());
+        if (this.#input && void 0 !== normalisedValue) {
+            this.setInvalid(false);
+            if (normalisedValue !== this.#value) this.setValue(normalisedValue);
+            this.selectFirst();
+            return true;
+        }
+        return false;
     }
     getUnitAtCursorPos(cursorPos = this.cursorPos) {
-        if (cursorPos >= 0 && cursorPos < 3) return "hours";
-        if (cursorPos < 6) return "minutes";
-        if (cursorPos <= 8) return "seconds";
-        throw Error(`[MaskedInput] getUnitAtCursorPos invalid cursor position ${cursorPos}`);
+        for(let i = this.#units.length - 1; i > 0; i--){
+            const unit = this.#units[i];
+            if (cursorPos >= unitSpec[unit].start) return unit;
+        }
+        return this.firstUnit;
+    }
+    get activeUnit() {
+        return this.#selectedUnit ?? this.getUnitAtCursorPos();
     }
     incrementValue() {
         if (this.#input) {
-            this.#isIncrementalChange = true;
-            const unit = this.getUnitAtCursorPos();
-            const unitValue = this.getUnitValue(unit);
-            const newUnitValue = incrementTimeUnitValue(unit, unitValue);
+            const unit = this.activeUnit;
+            const newUnitValue = incrementTimeUnitValue(unit, this.getUnitValue(unit));
+            this.setInvalid(false);
             this.setUnitValue(unit, newUnitValue);
             this.select(unit);
         }
     }
     decrementValue() {
         if (this.#input) {
-            this.#isIncrementalChange = true;
-            const unit = this.getUnitAtCursorPos();
-            const unitValue = this.getUnitValue(unit);
-            const newUnitValue = decrementTimeUnitValue(unit, unitValue);
+            const unit = this.activeUnit;
+            const newUnitValue = decrementTimeUnitValue(unit, this.getUnitValue(unit));
+            this.setInvalid(false);
             this.setUnitValue(unit, newUnitValue);
             this.select(unit);
         }
     }
     backspace() {
         if (this.#input) {
-            const { cursorPos } = this;
-            if ("seconds" === this.#unitSelected) {
-                this.clear("seconds");
-                this.select("minutes");
-            } else if ("minutes" === this.#unitSelected) {
-                this.clear("minutes");
-                this.select("hours");
-            } else if ("hours" === this.#unitSelected) {
-                this.clear("hours");
-                this.select("hours");
-            } else if (cursorPos > 0) {
-                const offset = 6 === this.selectionStart || 3 === this.selectionStart ? 2 : 1;
-                const newValue = this.#value.slice(0, cursorPos - offset).concat(zeroTime.slice(cursorPos - offset, cursorPos)).concat(this.#value.slice(cursorPos));
-                this.selectionStart -= offset;
-                this.selectionEnd -= offset;
-                this.setValue(newValue);
-                requestAnimationFrame(()=>{
-                    this.#input?.setSelectionRange(this.#selectionStart, this.selectionEnd);
-                });
-            }
+            const unit = this.activeUnit;
+            const isPartiallyEntered = this.#selectedUnit === unit && this.#digitIndex > 0;
+            this.setInvalid(false);
+            this.clear(unit);
+            this.select(isPartiallyEntered ? unit : this.previousUnit(unit));
         }
     }
     update(key) {
         if (this.#input) {
-            const { cursorPos } = this;
-            if (cursorPos < 8) {
-                const originalValue = this.#value;
-                const newValue = this.#value.split("").toSpliced(cursorPos, 1, key).join("");
-                this.setValue(newValue);
-                if (isValidTimeString(newValue)) {
-                    this.#input.classList.remove("invalid");
-                    if (this.#controlled && newValue === originalValue) this.advanceSelection();
-                    else if (!this.#controlled) this.advanceSelection();
-                } else if (this.#unitSelected) {
-                    this.select(this.#unitSelected);
-                    this.#input.classList.add("invalid");
-                }
+            const unit = this.activeUnit;
+            const { length, max } = unitSpec[unit];
+            const digitIndex = this.#selectedUnit === unit && this.#digitIndex < length ? this.#digitIndex : 0;
+            const maxFirstDigit = Math.floor(max / 10 ** (length - 1));
+            let newUnitValue;
+            let nextDigitIndex;
+            if (0 === digitIndex && parseInt(key) > maxFirstDigit) {
+                newUnitValue = key.padStart(length, "0");
+                nextDigitIndex = length;
+            } else {
+                const unitValue = this.getUnitValue(unit);
+                const head = unitValue.slice(0, digitIndex).concat(key);
+                const overwritten = head.concat(unitValue.slice(digitIndex + 1));
+                newUnitValue = isValidUnitValue(unit, overwritten) ? overwritten : head.padEnd(length, "0");
+                nextDigitIndex = digitIndex + 1;
+            }
+            if (!isValidUnitValue(unit, newUnitValue)) {
+                this.setInvalid(true);
+                this.select(unit, digitIndex);
+                return;
             }
+            this.setInvalid(false);
+            this.setUnitValue(unit, newUnitValue);
+            if (nextDigitIndex === length) this.select(this.nextUnit(unit));
+            else this.select(unit, nextDigitIndex);
         }
     }
     getSelection() {
         if (this.#input) {
             const { selectionEnd, selectionStart } = this.#input;
-            if (null === selectionEnd || null === selectionStart) return NullSelection;
-            if (0 === selectionStart && 8 === selectionEnd) return FullSelection;
-            if (8 === selectionStart && 8 === selectionEnd) return CursorAtEnd;
-            else return {
+            return {
                 end: selectionEnd,
                 start: selectionStart
             };
         }
-        throw Error("[MasketInput] selection referenced, but no input");
+        throw Error("[MaskedInput] selection referenced, but no input");
     }
     click() {
         if (this.#input) {
             this.#isFocused = true;
-            const selection = this.getSelection();
-            if (selection === NullSelection) this.select("hours");
-            else if (selection === FullSelection) ;
-            else {
-                const cursorPos = this.#input.selectionStart ?? 0;
-                this.select(this.getUnitAtCursorPos(cursorPos));
-            }
+            const { start, end } = this.getSelection();
+            if (null === start) this.selectFirst();
+            else 0 === start && end === this.length || this.select(this.getUnitAtCursorPos(start));
         }
     }
     doubleClick() {
         if (this.#input) {
-            const { selectionStart, selectionEnd } = this.#input;
-            if (null === selectionStart || null === selectionEnd) ;
-            else if (selectionStart < 3) this.select("hours");
-            else if (selectionStart < 6) this.select("minutes");
-            else if (selectionStart <= 8) this.select("seconds");
+            const { selectionStart } = this.#input;
+            if (null !== selectionStart) this.select(this.getUnitAtCursorPos(selectionStart));
         }
     }
     focus = ()=>{
         if (this.#input) {
             this.#isFocused = true;
             requestAnimationFrame(()=>{
-                this.select("hours");
+                this.selectFirst();
             });
         }
     };
@@ -282,4 +302,4 @@ class MaskedInput extends EventEmitter {
         this.#isFocused = false;
     };
 }
-export { MaskedInput };
+export { MaskedInput, invalidClassName };

package/src/time-input/TimeInput.css.js

@@ -1,25 +1,48 @@
 const css = `
-.salt-density-high .vuuTimeInput {
-  --time-input-width: 60px;
-}
-
-.salt-density-medium .vuuTimeInput {
-  --time-input-width: 70px;
-}
+.vuuTimeInput-container {
+  --time-input-border: var(--vuuTimeInput-borderWidth, 1px);
+  --time-input-padding: var(--vuuTimeInput-paddingInline, var(--salt-spacing-50));
+  font-family: var(--salt-typography-fontFamily);
+  font-size: var(--vuuTimeInput-fontSize, var(--salt-text-fontSize));
+  font-variant-numeric: tabular-nums;
+  width: fit-content;
+  display: inline-grid;
+
+  &:before, &:after {
+    border: 0 solid #0000;
+    border-inline-width: var(--time-input-border);
+    box-sizing: content-box;
+    height: 0;
+    max-width: calc(var(--vuuTimeInput-width, 10000px) - 1px);
+    padding-inline: var(--time-input-padding);
+    visibility: hidden;
+    white-space: pre;
+    grid-area: 1 / 1;
+    padding-inline-end: calc(var(--time-input-padding) + 1px);
+  }
 
-.salt-density-low .vuuTimeInput {
-  --time-input-width: 80px;
-}
+  &:before {
+    content: attr(data-placeholder);
+  }
 
-.salt-density-touch .vuuTimeInput {
-  --time-input-width: 90px;
+  &:after {
+    content: attr(data-sample-value);
+  }
 }
 
 .vuuTimeInput {
   background: var(--vuuTimeInput-background, inherit);
-  font-family: var(--salt-typography-fontFamily);
-  width: var(--vuuTimeInput-width, var(--time-input-width));
-  border-width: 1px;
+  border-width: var(--time-input-border);
+  box-sizing: content-box;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: inherit;
+  height: calc(var(--vuuTimeInput-height, var(--salt-size-base)) - 2 *
+      var(--time-input-border));
+  min-width: calc(100% - 2 * var(--time-input-padding) - 2 * var(--time-input-border));
+  padding: 0 var(--time-input-padding);
+  width: var(--vuuTimeInput-width, 0px);
+  grid-area: 1 / 1;
 
   &:focus::-webkit-input-placeholder {
     color: #0000;
@@ -28,10 +51,10 @@ const css = `
   &:focus {
     outline: var(--vuuTimeInput-outline, var(--salt-focused-outline));
   }
-}
 
-.invalid {
-  border-color: red;
+  &.vuuTimeInput-invalid {
+    border-color: var(--vuuTimeInput-invalid-borderColor, var(--salt-status-error-borderColor, red));
+  }
 }
 
 

package/src/time-input/TimeInput.js

@@ -1,12 +1,14 @@
-import { createElement, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { useForkRef } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
+import { normaliseTimeString } from "@vuu-ui/vuu-utils";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import { useTimeInput } from "./useTimeInput.js";
 import TimeInput_0 from "./TimeInput.css";
 const classBase = "vuuTimeInput";
-const TimeInput_TimeInput = /*#__PURE__*/ forwardRef(function({ className, date, defaultValue, onChange, onCommit, placeholder = "hh:mm:ss", value, ...htmlAttributes }, ref) {
+const TimeInput_TimeInput = /*#__PURE__*/ forwardRef(function({ className, date, defaultValue, milliseconds = false, onChange, onCommit, placeholder = milliseconds ? "hh:mm:ss.sss" : "hh:mm:ss", value, ...htmlAttributes }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-time-input",
@@ -16,22 +18,31 @@ const TimeInput_TimeInput = /*#__PURE__*/ forwardRef(function({ className, date,
     const { inputRef, eventHandlers } = useTimeInput({
         date,
         defaultValue,
+        milliseconds,
         onChange,
         onCommit,
         value
     });
-    return /*#__PURE__*/ createElement("input", {
-        ...htmlAttributes,
-        ...eventHandlers,
-        "aria-placeholder": placeholder,
-        className: clsx(classBase, className),
-        defaultValue: defaultValue,
-        key: defaultValue,
-        placeholder: placeholder,
-        readOnly: true,
-        ref: useForkRef(ref, inputRef),
-        spellCheck: "false",
-        value: value
+    const displayValue = void 0 === value ? void 0 : normaliseTimeString(value, milliseconds) ?? value;
+    const displayDefaultValue = void 0 === value && void 0 !== defaultValue ? normaliseTimeString(defaultValue, milliseconds) ?? defaultValue : void 0;
+    return /*#__PURE__*/ jsx("span", {
+        className: `${classBase}-container`,
+        "data-placeholder": placeholder,
+        "data-sample-value": milliseconds ? "00:00:00.000" : "00:00:00",
+        children: /*#__PURE__*/ jsx("input", {
+            ...htmlAttributes,
+            ...eventHandlers,
+            "aria-placeholder": placeholder,
+            className: clsx(classBase, className, {
+                [`${classBase}-milliseconds`]: milliseconds
+            }),
+            defaultValue: displayDefaultValue,
+            placeholder: placeholder,
+            readOnly: true,
+            ref: useForkRef(ref, inputRef),
+            spellCheck: "false",
+            value: displayValue
+        })
     });
 });
 export { TimeInput_TimeInput as TimeInput };

package/src/time-input/useTimeInput.js

@@ -1,75 +1,85 @@
-import { isValidTimeString } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo, useRef } from "react";
+import { isValidTimeString, isValidTimeStringMillis } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
 import { MaskedInput } from "./MaskedInput.js";
 const isDigit = (char)=>1 === char.length && /[0-9]/.test(char);
-const useTimeInput = ({ defaultValue, onChange, onCommit, value })=>{
+const useTimeInput = ({ defaultValue, milliseconds = false, onChange, onCommit: onCommitProp, value })=>{
+    const onCommit = onCommitProp;
     const mousedDownRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
     const maskedInputRef = useRef(void 0);
-    useMemo(()=>{
-        if (void 0 === maskedInputRef.current) {
-            maskedInputRef.current = new MaskedInput(defaultValue, null);
-            maskedInputRef.current.on("change", (e)=>{
-                onChange?.(e);
-            });
-        }
-        if (value && value !== maskedInputRef.current.value) maskedInputRef.current.value = value;
+    if (void 0 === maskedInputRef.current || maskedInputRef.current.milliseconds !== milliseconds) {
+        maskedInputRef.current = new MaskedInput(value ?? maskedInputRef.current?.value ?? defaultValue, null, {
+            milliseconds
+        });
+        maskedInputRef.current.on("change", (e)=>{
+            onChangeRef.current?.(e);
+        });
+    }
+    const maskedInput = maskedInputRef.current;
+    if (void 0 !== value) maskedInput.value = value;
+    const setInputEl = useCallback((el)=>{
+        maskedInput.input = el;
     }, [
-        defaultValue,
-        onChange,
-        value
+        maskedInput
     ]);
-    const setInputEl = useCallback((el)=>{
-        if (el && maskedInputRef.current) maskedInputRef.current.input = el;
-    }, []);
-    const back = useRef(false);
-    const commitValue = useCallback((evt, value)=>{
-        if (isValidTimeString(value)) onCommit(evt, value, "text-input");
-        else if ("hh:mm:ss" === value) console.log("no value set");
-        else console.log("value is not valid");
+    const commitValue = useCallback((evt)=>{
+        if ("" !== evt.currentTarget.value) {
+            const { value } = maskedInput;
+            if (milliseconds ? isValidTimeStringMillis(value) : isValidTimeString(value)) onCommit(evt, value, "text-input");
+        }
     }, [
+        maskedInput,
+        milliseconds,
         onCommit
     ]);
     const handleKeyDown = useCallback((e)=>{
-        const { current: maskedInput } = maskedInputRef;
-        if (maskedInput) {
-            if ("Backspace" === e.key) {
-                maskedInput.backspace();
-                back.current = true;
-            } else if (isDigit(e.key)) maskedInput.update(e.key);
-            else if ("ArrowLeft" === e.key) maskedInput.moveFocus("left");
-            else if ("ArrowRight" === e.key) maskedInput.moveFocus("right");
-            else if ("ArrowUp" === e.key) maskedInput.incrementValue();
-            else if ("ArrowDown" === e.key) maskedInput.decrementValue();
-            else if ("v" === e.key && e.metaKey) return;
-            else if ("Tab" === e.key) return;
-            else if ("Enter" === e.key) commitValue(e, maskedInput.value);
-        }
+        if (e.ctrlKey || e.metaKey || e.altKey || "Tab" === e.key) return;
+        if ("Backspace" === e.key) maskedInput.backspace();
+        else if (isDigit(e.key)) maskedInput.update(e.key);
+        else if ("ArrowLeft" === e.key) maskedInput.moveFocus("left");
+        else if ("ArrowRight" === e.key) maskedInput.moveFocus("right");
+        else if ("ArrowUp" === e.key) maskedInput.incrementValue();
+        else if ("ArrowDown" === e.key) maskedInput.decrementValue();
+        else if ("Home" === e.key) maskedInput.selectFirst();
+        else if ("End" === e.key) maskedInput.selectLast();
+        else if ("Enter" === e.key) commitValue(e);
+        else if ("Escape" === e.key) return;
         e.preventDefault();
     }, [
-        commitValue
+        commitValue,
+        maskedInput
     ]);
     const handleDoubleClick = useCallback(()=>{
-        maskedInputRef.current?.doubleClick();
-    }, []);
+        maskedInput.doubleClick();
+    }, [
+        maskedInput
+    ]);
     const handlePaste = useCallback((e)=>{
-        const value = e.clipboardData.getData("text");
-        if (isValidTimeString(value)) maskedInputRef.current?.pasteValue(value);
-    }, []);
+        e.preventDefault();
+        maskedInput.pasteValue(e.clipboardData.getData("text"));
+    }, [
+        maskedInput
+    ]);
     const handleFocus = useCallback(()=>{
         if (mousedDownRef.current) mousedDownRef.current = false;
-        else maskedInputRef.current?.focus();
-    }, []);
+        else maskedInput.focus();
+    }, [
+        maskedInput
+    ]);
     const handleMouseDown = useCallback(()=>{
         mousedDownRef.current = true;
     }, []);
     const handleMouseUp = useCallback((e)=>{
         e.preventDefault();
-        maskedInputRef.current?.click();
-    }, []);
+        maskedInput.click();
+    }, [
+        maskedInput
+    ]);
     return {
         inputRef: setInputEl,
         eventHandlers: {
-            onBlur: maskedInputRef.current?.blur,
+            onBlur: maskedInput.blur,
             onDoubleClick: handleDoubleClick,
             onFocus: handleFocus,
             onKeyDown: handleKeyDown,

package/src/vuu-date-picker/VuuDatePicker.js

@@ -1,84 +1,78 @@
-import { createElement, useCallback, useRef, useState } from "react";
-import { getLocalTimeZone, isSameDay, isSameMonth, isSameYear } from "@internationalized/date";
+import { createElement, useCallback, useMemo, useRef, useState } from "react";
+import { EpochTimestamp, fromDateTimeFields } from "@vuu-ui/vuu-utils";
+import { CalendarDate } from "@internationalized/date";
 import clsx from "clsx";
 import { DatePicker } from "../date-picker/index.js";
 const classBase = "VuuDatePicker";
-const isSameDate = (d1, d2)=>void 0 !== d2 && isSameDay(d1, d2) && isSameMonth(d1, d2) && isSameYear(d1, d2);
 const datePattern = /^\d{1,2} [a-z]{3} \d{4}$/i;
-const isValidDate = (value)=>void 0 !== value && value?.match(datePattern) !== null && !Number.isNaN(new Date(value).getDay());
-const localTimeZone = getLocalTimeZone();
-const toEpochMillis = (date, timezone = getLocalTimeZone())=>date.toDate(timezone).getTime();
-const getDates = (selectedDate)=>{
-    if (selectedDate) return {
-        datePickerKey: "controlled",
-        defaultDate: void 0,
-        selectedDate
-    };
-    return {
-        datePickerKey: "uncontrolled",
-        defaultDate: void 0,
-        selectedDate
-    };
+const isValidDate = (value)=>void 0 !== value && null !== value.match(datePattern) && !Number.isNaN(new Date(value).getDay());
+const isSameDate = (d1, d2)=>void 0 !== d2 && 0 === d1.compare(d2);
+const toCalendarDateInTimeZone = (value, timeZone)=>{
+    const timestamp = value instanceof EpochTimestamp ? value : EpochTimestamp.fromWire(value, "epochMillis");
+    if (timestamp) {
+        const { year, month, day } = timestamp.getFields(timeZone);
+        return new CalendarDate(year, month, day);
+    }
 };
-const VuuDatePicker = ({ className, onSelectionChange, selectedDate: selectedDateProp, onCommit, preserveFocusOnSelect, ...props })=>{
-    const [open, _setOpen] = useState(false);
-    const valueRef = useRef("");
+const startOfDateInTimeZone = (date, timeZone)=>fromDateTimeFields({
+        year: date.year,
+        month: date.month,
+        day: date.day,
+        hour: 0,
+        minute: 0,
+        second: 0,
+        millisecond: 0
+    }, timeZone);
+const VuuDatePicker = ({ className, onSelectionChange, onCommit, preserveFocusOnSelect, selectedDate: selectedDateProp, timeZone, value, ...props })=>{
+    const [open, setOpen] = useState(false);
+    const inputValueRef = useRef("");
     const datePickerRef = useRef(null);
-    const dateState = useRef(getDates(selectedDateProp));
-    const setOpen = (o)=>{
-        console.log(`setOpen ${o}`);
-        _setOpen(o);
-    };
+    const controlledDate = useMemo(()=>selectedDateProp ?? toCalendarDateInTimeZone(value, timeZone), [
+        selectedDateProp,
+        timeZone,
+        value
+    ]);
+    const [selectedDate, setSelectedDate] = useState(controlledDate);
+    const controlledDateRef = useRef(controlledDate);
+    if (void 0 !== controlledDate && (void 0 === controlledDateRef.current || 0 !== controlledDate.compare(controlledDateRef.current))) {
+        controlledDateRef.current = controlledDate;
+        if (!isSameDate(controlledDate, selectedDate)) setSelectedDate(controlledDate);
+    }
     const commitDateChange = useCallback((e, date)=>{
         onSelectionChange?.(e, date);
         setOpen(false);
-        onCommit?.(e, toEpochMillis(date, localTimeZone));
+        onCommit?.(e, startOfDateInTimeZone(date, timeZone));
         if (preserveFocusOnSelect) requestAnimationFrame(()=>{
             datePickerRef.current?.querySelector("input")?.focus();
         });
     }, [
         onCommit,
         onSelectionChange,
-        preserveFocusOnSelect
+        preserveFocusOnSelect,
+        timeZone
     ]);
     const handleSelectionChange = useCallback((e, date)=>{
-        const { selectedDate } = dateState.current;
-        if (date) {
-            if (void 0 === selectedDate) {
-                dateState.current = getDates(date);
-                commitDateChange(e, date);
-            } else if (!isSameDate(date, selectedDate)) {
-                dateState.current.selectedDate = date;
-                commitDateChange(e, date);
-            }
+        if (date && !isSameDate(date, selectedDate)) {
+            setSelectedDate(date);
+            commitDateChange(e, date);
         }
     }, [
-        commitDateChange
+        commitDateChange,
+        selectedDate
     ]);
-    const handleChange = (evt, value = "")=>{
-        console.log("handleChange", {
-            evt,
-            value
-        });
-        valueRef.current = value;
-        console.log(`is '${value}' a valid date ? ${isValidDate(value)}`);
+    const handleChange = (_evt, value = "")=>{
+        inputValueRef.current = value;
     };
     const handleKeyDown = (e)=>{
         if ("ArrowDown" === e.key) setOpen(true);
     };
     const handleKeyDownCapture = (e)=>{
-        if ("Enter" === e.key) if (isValidDate(valueRef.current)) console.log(`committayaface (${valueRef.current})`);
-        else {
-            console.log(`nice try cowboy, but '${valueRef.current}' is nota valid date`);
-            e.stopPropagation();
-        }
+        if ("Enter" === e.key && "" !== inputValueRef.current && !isValidDate(inputValueRef.current)) e.stopPropagation();
     };
-    const { datePickerKey, defaultDate, selectedDate } = dateState.current;
     return /*#__PURE__*/ createElement(DatePicker, {
         ...props,
         className: clsx(classBase, className),
-        defaultSelectedDate: defaultDate,
-        key: datePickerKey,
+        key: selectedDate ? "controlled" : "uncontrolled",
         open: open,
         onChange: handleChange,
         onKeyDown: handleKeyDown,

package/src/vuu-time-picker/VuuTimePicker.js

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { TimeInput } from "../time-input/TimeInput.js";
 import VuuTimePicker from "./VuuTimePicker.css";
 const classBase = "vuuTimePicker";
-const VuuTimePicker_VuuTimePicker = ({ className, defaultValue, onChange, onCommit, value, ...htmlAttributes })=>{
+const VuuTimePicker_VuuTimePicker = ({ className, defaultValue, milliseconds, onChange, onCommit, value, ...htmlAttributes })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-time-picker",
@@ -16,10 +16,11 @@ const VuuTimePicker_VuuTimePicker = ({ className, defaultValue, onChange, onComm
         ...htmlAttributes,
         className: clsx(classBase, className),
         children: /*#__PURE__*/ jsx(TimeInput, {
-            defaultValue: defaultValue,
-            onChange: onChange,
-            onCommit: onCommit,
-            value: value
+            defaultValue,
+            milliseconds,
+            onChange,
+            onCommit,
+            value
         })
     });
 };

package/types/index.d.ts

@@ -23,10 +23,10 @@ export * from "./split-button";
 export * from "./table-search";
 export * from "./tabs-next";
 export * from "./tabstrip";
-export { TimeInput, type TimeInputProps } from "./time-input/TimeInput";
+export { TimeInput, type TimeInputMillisecondsProps, type TimeInputProps, type TimeInputSecondsProps, } from "./time-input/TimeInput";
 export * from "./toolbar";
 export * from "./utils";
 export * from "./vuu-date-picker";
 export * from "./vuu-input";
-export { VuuTimePicker, type VuuTimePickerProps, } from "./vuu-time-picker/VuuTimePicker";
+export { VuuTimePicker, type VuuTimePickerMillisecondsProps, type VuuTimePickerProps, type VuuTimePickerSecondsProps, } from "./vuu-time-picker/VuuTimePicker";
 export * from "./vuu-typeahead-input";

package/types/modal-provider/ModalProvider.d.ts

@@ -4,7 +4,7 @@ export type ShowDialog = (dialogContent: ReactElement, title: string, dialogActi
 export type ShowPrompt = (promptContent: ReactElement, promptProps: PromptProps) => void;
 export declare const ModalProvider: ({ children }: {
     children: ReactNode;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useModal: () => {
     showDialog: ShowDialog;
     closeDialog: () => void;

package/types/time-input/MaskedInput.d.ts

@@ -1,13 +1,32 @@
-import { EventEmitter, TimeString, TimeUnit } from "@vuu-ui/vuu-utils";
+import { EventEmitter, TimeString, TimeStringMillis, TimeUnit } from "@vuu-ui/vuu-utils";
 import { ChangeEventHandler } from "react";
 export type Digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+export type TimeValue = TimeString | TimeStringMillis;
+export declare const invalidClassName = "vuuTimeInput-invalid";
+export interface MaskedInputOptions {
+    /**
+     * When true, value includes milliseconds, hh:mm:ss.SSS
+     */
+    milliseconds?: boolean;
+}
 export type MaskedInputEvents = {
     change: ChangeEventHandler<HTMLInputElement>;
 };
 export declare class MaskedInput extends EventEmitter<MaskedInputEvents> {
     #private;
-    constructor(defaultValue: TimeString | undefined, inputEl?: HTMLInputElement | null);
-    set input(el: HTMLInputElement);
+    constructor(defaultValue: TimeValue | undefined, inputEl?: HTMLInputElement | null, { milliseconds }?: MaskedInputOptions);
+    get milliseconds(): boolean;
+    private get zeroValue();
+    /**
+     * Length of the formatted value, hh:mm:ss or hh:mm:ss.SSS
+     */
+    get length(): 8 | 12;
+    private normalise;
+    /**
+     * Attach (or re-attach) the input element. Re-attaching the same element
+     * is a no-op, attaching a different element detaches the previous one.
+     */
+    set input(el: HTMLInputElement | null);
     /**
      * The change event is fired programatically. This will only be handled
      * by a native event handler ( not a React handler). We handle this event
@@ -21,25 +40,56 @@ export declare class MaskedInput extends EventEmitter<MaskedInputEvents> {
     set selectionStart(value: number);
     get selectionEnd(): number;
     set selectionEnd(value: number);
+    private nextUnit;
+    private previousUnit;
+    private get firstUnit();
+    private get lastUnit();
     private setValue;
-    private setUnitValue;
     private getUnitValue;
-    get value(): TimeString;
+    private setUnitValue;
+    private setInvalid;
+    get value(): TimeValue;
     /**
-     * Setting the value this way invokes 'controlled' mode
+     * Setting the value this way invokes 'controlled' mode. Value
+     * will be normalised to the configured precision.
      */
-    set value(value: TimeString);
+    set value(value: TimeValue);
     clear(unit: TimeUnit): void;
-    select(unit: TimeUnit, halfUnit?: boolean): void;
+    /**
+     * Select a unit. If digitIndex > 0, only the digits of the unit
+     * not yet entered are selected.
+     */
+    select(unit: TimeUnit, digitIndex?: number): void;
     removeSelection(): void;
     restoreSelection(): void;
-    advanceSelection(): void;
+    selectFirst(): void;
+    selectLast(): void;
     moveFocus(direction: "left" | "right"): void;
-    pasteValue(value: TimeString): void;
+    /**
+     * Replace the entire value, e.g. from a paste. Values with or without
+     * milliseconds are accepted and converted to the configured precision.
+     * Invalid values are ignored. Returns true if value was accepted.
+     */
+    pasteValue(value: string): boolean;
     private getUnitAtCursorPos;
+    private get activeUnit();
     incrementValue(): void;
     decrementValue(): void;
+    /**
+     * If a full unit is selected, it is cleared and selection moves to the
+     * previous unit. If we are midway through entering a unit, the unit is
+     * cleared and remains selected.
+     */
     backspace(): void;
+    /**
+     * Typing the first digit of a unit sets the unit to that digit followed
+     * by zeros, e.g '1' => '10' and selection moves to the next digit. If
+     * the digit cannot be the first digit of a valid unit, e.g '3' for hours,
+     * the unit is zero padded, e.g '03', and selection advances to the next unit.
+     * Typing the last digit completes the unit and selection advances to the
+     * next unit. A digit which would produce an invalid value is rejected and
+     * the input is marked as invalid.
+     */
     update(key: Digit): void;
     private getSelection;
     click(): void;

package/types/time-input/TimeInput.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from "react";
-import { TimeInputHookProps } from "./useTimeInput";
-export interface TimeInputProps extends TimeInputHookProps, Omit<HTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "value">, Partial<Pick<HTMLInputElement, "placeholder">> {
-}
+import { TimeInputHookProps, TimeInputMillisecondsProps, TimeInputSecondsProps } from "./useTimeInput";
+type TimeInputHtmlAttributes = Omit<HTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "value"> & Partial<Pick<HTMLInputElement, "placeholder">>;
+export type { TimeInputMillisecondsProps, TimeInputSecondsProps };
+export type TimeInputProps = TimeInputHookProps & TimeInputHtmlAttributes;
 export declare const TimeInput: import("react").ForwardRefExoticComponent<TimeInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/types/time-input/useTimeInput.d.ts

@@ -1,16 +1,34 @@
-import { type CommitHandler, DateStringISO, type TimeString } from "@vuu-ui/vuu-utils";
+import { type CommitHandler, DateStringISO, type TimeString, type TimeStringMillis } from "@vuu-ui/vuu-utils";
 import { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefCallback } from "react";
-export interface TimeInputHookProps {
+interface TimeInputCommonProps {
     date?: Date | DateStringISO;
-    defaultValue?: TimeString;
     onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export interface TimeInputSecondsProps extends TimeInputCommonProps {
+    defaultValue?: TimeString;
+    /**
+     * When true, time is entered and displayed with millisecond
+     * precision, hh:mm:ss.SSS
+     */
+    milliseconds?: false;
     onCommit: CommitHandler<HTMLInputElement, TimeString>;
     value?: TimeString;
 }
-export declare const useTimeInput: ({ defaultValue, onChange, onCommit, value, }: TimeInputHookProps) => {
+export interface TimeInputMillisecondsProps extends TimeInputCommonProps {
+    defaultValue?: TimeStringMillis;
+    /**
+     * When true, time is entered and displayed with millisecond
+     * precision, hh:mm:ss.SSS
+     */
+    milliseconds: true;
+    onCommit: CommitHandler<HTMLInputElement, TimeStringMillis>;
+    value?: TimeStringMillis;
+}
+export type TimeInputHookProps = TimeInputSecondsProps | TimeInputMillisecondsProps;
+export declare const useTimeInput: ({ defaultValue, milliseconds, onChange, onCommit: onCommitProp, value, }: TimeInputHookProps) => {
     inputRef: RefCallback<HTMLInputElement>;
     eventHandlers: {
-        onBlur: (() => void) | undefined;
+        onBlur: () => void;
         onDoubleClick: () => void;
         onFocus: FocusEventHandler<HTMLInputElement>;
         onKeyDown: KeyboardEventHandler<HTMLInputElement>;
@@ -19,3 +37,4 @@ export declare const useTimeInput: ({ defaultValue, onChange, onCommit, value, }
         onPaste: ClipboardEventHandler<HTMLInputElement>;
     };
 };
+export {};

package/types/vuu-date-picker/VuuDatePicker.d.ts

@@ -1,7 +1,23 @@
-import { CommitHandler } from "@vuu-ui/vuu-utils";
+import { type CommitHandler, EpochTimestamp, type TimeZoneSpec } from "@vuu-ui/vuu-utils";
 import { SingleSelectionValueType } from "../calendar";
 import { DatePickerProps } from "../date-picker";
-export declare const VuuDatePicker: ({ className, onSelectionChange, selectedDate: selectedDateProp, onCommit, preserveFocusOnSelect, ...props }: Omit<DatePickerProps<SingleSelectionValueType>, "defaultSelectedDate"> & {
+export interface VuuDatePickerProps extends Omit<DatePickerProps<SingleSelectionValueType>, "defaultSelectedDate" | "onChange"> {
+    /**
+     * Invoked when user selects a date from the calendar, or enters a valid date and
+     * presses Enter. Value is epoch millis at the start of the selected day, in timeZone.
+     */
     onCommit?: CommitHandler<HTMLElement, number>;
     preserveFocusOnSelect?: boolean;
-}) => import("react").JSX.Element;
+    /**
+     * The time zone used to convert between epoch values and calendar dates.
+     * Defaults to the application default time zone (see setDefaultTimeZone).
+     */
+    timeZone?: TimeZoneSpec;
+    /**
+     * An epoch value (millis as number, or millis/nanos as EpochTimestamp). An
+     * alternative to selectedDate, when the date is derived from a timestamp. The
+     * calendar date is determined in timeZone.
+     */
+    value?: EpochTimestamp | number;
+}
+export declare const VuuDatePicker: ({ className, onSelectionChange, onCommit, preserveFocusOnSelect, selectedDate: selectedDateProp, timeZone, value, ...props }: VuuDatePickerProps) => import("react").JSX.Element;

package/types/vuu-time-picker/VuuTimePicker.d.ts

@@ -1,7 +1,9 @@
-import { CommitHandler, TimeString } from "@vuu-ui/vuu-utils";
 import { HTMLAttributes } from "react";
-import { TimeInputProps } from "../time-input/TimeInput";
-export interface VuuTimePickerProps extends Pick<TimeInputProps, "defaultValue" | "onChange" | "value">, Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "value"> {
-    onCommit: CommitHandler<HTMLInputElement, TimeString>;
-}
-export declare const VuuTimePicker: ({ className, defaultValue, onChange, onCommit, value, ...htmlAttributes }: VuuTimePickerProps) => import("react").JSX.Element;
+import { TimeInputMillisecondsProps, TimeInputSecondsProps } from "../time-input/TimeInput";
+type VuuTimePickerHtmlAttributes = Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "value">;
+type TimePickerInputProps = "defaultValue" | "milliseconds" | "onChange" | "onCommit" | "value";
+export type VuuTimePickerSecondsProps = Pick<TimeInputSecondsProps, TimePickerInputProps> & VuuTimePickerHtmlAttributes;
+export type VuuTimePickerMillisecondsProps = Pick<TimeInputMillisecondsProps, TimePickerInputProps> & VuuTimePickerHtmlAttributes;
+export type VuuTimePickerProps = VuuTimePickerSecondsProps | VuuTimePickerMillisecondsProps;
+export declare const VuuTimePicker: ({ className, defaultValue, milliseconds, onChange, onCommit, value, ...htmlAttributes }: VuuTimePickerProps) => import("react").JSX.Element;
+export {};