@helpwave/hightide 0.8.9 → 0.8.11

package/dist/index.js

@@ -14655,6 +14655,9 @@ var TimePicker = ({
   onEditComplete,
   is24HourFormat = true,
   minuteIncrement = "5min",
+  secondIncrement = "5s",
+  millisecondIncrement = "100ms",
+  precision = "minute",
   className
 }) => {
   const [value, setValue] = useControlledState({
@@ -14666,22 +14669,58 @@ var TimePicker = ({
   const hourRef = (0, import_react64.useRef)(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
-  let minutes = range(60);
-  switch (minuteIncrement) {
-    case "5min":
-      minutes = minutes.filter((value2) => value2 % 5 === 0);
-      break;
-    case "10min":
-      minutes = minutes.filter((value2) => value2 % 10 === 0);
-      break;
-    case "15min":
-      minutes = minutes.filter((value2) => value2 % 15 === 0);
-      break;
-    case "30min":
-      minutes = minutes.filter((value2) => value2 % 30 === 0);
-      break;
-  }
-  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes()));
+  const minutes = (0, import_react64.useMemo)(() => {
+    const full = range(60);
+    switch (minuteIncrement) {
+      case "5min":
+        return full.filter((value2) => value2 % 5 === 0);
+      case "10min":
+        return full.filter((value2) => value2 % 10 === 0);
+      case "15min":
+        return full.filter((value2) => value2 % 15 === 0);
+      case "30min":
+        return full.filter((value2) => value2 % 30 === 0);
+    }
+  }, [minuteIncrement]);
+  const seconds = (0, import_react64.useMemo)(() => {
+    const full = range(60);
+    switch (secondIncrement) {
+      case "1s":
+        return full.filter((value2) => value2 % 1 === 0);
+      case "5s":
+        return full.filter((value2) => value2 % 5 === 0);
+      case "10s":
+        return full.filter((value2) => value2 % 10 === 0);
+      case "15s":
+        return full.filter((value2) => value2 % 15 === 0);
+      case "30s":
+        return full.filter((value2) => value2 % 30 === 0);
+    }
+  }, [secondIncrement]);
+  const milliseconds = (0, import_react64.useMemo)(() => {
+    const full = range(1e3);
+    switch (millisecondIncrement) {
+      case "1ms":
+        return full.filter((value2) => value2 % 1 === 0);
+      case "5ms":
+        return full.filter((value2) => value2 % 5 === 0);
+      case "10ms":
+        return full.filter((value2) => value2 % 10 === 0);
+      case "25ms":
+        return full.filter((value2) => value2 % 25 === 0);
+      case "50ms":
+        return full.filter((value2) => value2 % 50 === 0);
+      case "100ms":
+        return full.filter((value2) => value2 % 100 === 0);
+      case "250ms":
+        return full.filter((value2) => value2 % 250 === 0);
+      case "500ms":
+        return full.filter((value2) => value2 % 500 === 0);
+    }
+  }, [millisecondIncrement]);
+  const closestMinute = (0, import_react64.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
+  const closestSecond = (0, import_react64.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
+  const closestMillisecond = (0, import_react64.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
   const hour = value.getHours();
   (0, import_react64.useEffect)(() => {
     minuteRef.current?.scrollIntoView({
@@ -14732,6 +14771,36 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Visibility, { isVisible: precision === "second" || precision === "millisecond", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-name": "time-picker-value-column", children: seconds.map((second) => {
+      const isSelected = second === closestSecond;
+      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        Button,
+        {
+          size: "sm",
+          color: isSelected ? "primary" : "neutral",
+          ref: isSelected ? minuteRef : void 0,
+          onClick: () => onChangeWrapper((newDate) => newDate.setSeconds(second)),
+          className: "min-w-16",
+          children: second.toString().padStart(2, "0")
+        },
+        second + secondIncrement
+      );
+    }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Visibility, { isVisible: precision === "millisecond", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-name": "time-picker-value-column", children: milliseconds.map((millisecond) => {
+      const isSelected = millisecond === closestMillisecond;
+      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        Button,
+        {
+          size: "sm",
+          color: isSelected ? "primary" : "neutral",
+          ref: isSelected ? minuteRef : void 0,
+          onClick: () => onChangeWrapper((newDate) => newDate.setMilliseconds(millisecond)),
+          className: "min-w-16",
+          children: millisecond.toString().padStart(2, "0")
+        },
+        millisecond + millisecondIncrement
+      );
+    }) }) }),
     !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { "data-name": "time-picker-value-column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         Button,
@@ -14902,14 +14971,40 @@ var formatRelative = (date, locale) => {
   if (Math.abs(diffInSeconds) < timesInSeconds.yearImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "month");
   return rtf.format(Math.round(diffInSeconds / timesInSeconds.yearImprecise), "year");
 };
-var toInputString = (date, format) => {
+var toInputString = (date, format, precision = "minute", isLocalTime = true) => {
+  const pad = (n, l = 2) => String(n).padStart(l, "0");
+  const parts = isLocalTime ? {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    min: date.getMinutes(),
+    s: date.getSeconds(),
+    ms: date.getMilliseconds()
+  } : {
+    y: date.getUTCFullYear(),
+    m: date.getUTCMonth() + 1,
+    d: date.getUTCDate(),
+    h: date.getUTCHours(),
+    min: date.getUTCMinutes(),
+    s: date.getUTCSeconds(),
+    ms: date.getUTCMilliseconds()
+  };
+  const dateStr = `${pad(parts.y, 4)}-${pad(parts.m)}-${pad(parts.d)}`;
+  let timeStr = `${pad(parts.h)}:${pad(parts.min)}`;
+  if (precision === "second" || precision === "millisecond") {
+    timeStr += `:${pad(parts.s)}`;
+  }
+  if (precision === "millisecond") {
+    timeStr += `.${pad(parts.ms, 3)}`;
+  }
   switch (format) {
     case "date":
-      return date.toISOString().split("T")[0];
+      return dateStr;
     case "time":
-      return date.toISOString().split("T")[1].split("Z")[0];
+      return timeStr;
     case "dateTime":
-      return date.toISOString();
+      return `${dateStr}T${timeStr}`;
   }
 };
 var DateUtils = {
@@ -15026,7 +15121,8 @@ var DayPicker = ({
               date.getDate(),
               value.getHours(),
               value.getMinutes(),
-              value.getSeconds()
+              value.getSeconds(),
+              value.getMilliseconds()
             );
             setValue(newDate);
             onEditComplete?.(newDate);
@@ -15300,6 +15396,9 @@ var DateTimePicker = ({
   is24HourFormat,
   minuteIncrement,
   weekStart,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
   onValueChange,
   onEditComplete,
   timePickerProps,
@@ -15337,6 +15436,9 @@ var DateTimePicker = ({
         ...timePickerProps,
         is24HourFormat,
         minuteIncrement,
+        secondIncrement,
+        millisecondIncrement,
+        precision,
         value,
         onValueChange: setValue,
         onEditComplete
@@ -15359,6 +15461,15 @@ var DateTimePickerDialog = ({
   onEditComplete,
   mode = "date",
   pickerProps,
+  start,
+  end,
+  weekStart,
+  markToday,
+  is24HourFormat,
+  minuteIncrement,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
   labelId,
   label
 }) => {
@@ -15384,7 +15495,16 @@ var DateTimePickerDialog = ({
         mode,
         value: state,
         onValueChange: setState,
-        onEditComplete: setState
+        onEditComplete: setState,
+        start,
+        end,
+        weekStart,
+        markToday,
+        is24HourFormat,
+        minuteIncrement,
+        secondIncrement,
+        millisecondIncrement,
+        precision
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex-row-2 justify-end", children: [
@@ -15809,6 +15929,15 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
   pickerProps,
   outsideClickCloses = true,
   onDialogOpeningChange,
+  start,
+  end,
+  weekStart,
+  markToday,
+  is24HourFormat,
+  minuteIncrement,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
   disabled = false,
   readOnly = false,
   invalid = false,
@@ -15824,7 +15953,7 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
   });
   const [dialogValue, setDialogValue] = (0, import_react78.useState)(state ?? /* @__PURE__ */ new Date());
   const [stringInputState, setStringInputState] = (0, import_react78.useState)({
-    state: state ? DateUtils.toInputString(state, mode) : "",
+    state: state ? DateUtils.toInputString(state, mode, precision) : "",
     date: void 0
   });
   (0, import_react78.useEffect)(() => {
@@ -15865,8 +15994,9 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
           id: ids.input,
           value: stringInputState.state,
           onChange: (event) => {
-            const date = event.target.valueAsDate;
-            if (date) {
+            const date = new Date(event.target.value ?? "");
+            const isValid = !isNaN(date.getTime());
+            if (isValid) {
               restartTimer(() => {
                 innerRef.current?.blur();
                 setState(date);
@@ -15877,7 +16007,7 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
             }
             setStringInputState({
               state: event.target.value,
-              date: event.target.valueAsDate ?? void 0
+              date: isValid ? date : void 0
             });
           },
           onBlur: (event) => {
@@ -15953,7 +16083,16 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
               changeOpenWrapper(false);
             },
             pickerProps,
-            mode
+            mode,
+            start,
+            end,
+            weekStart,
+            markToday,
+            is24HourFormat,
+            minuteIncrement,
+            secondIncrement,
+            millisecondIncrement,
+            precision
           }
         )
       }