@multiplatform.one/forms 7.4.1 → 7.5.0

package/dist/cjs/fields/Duration/index.cjs

@@ -23,12 +23,14 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var Duration_exports = {};
 __export(Duration_exports, {
   Duration: () => Duration,
-  normalizeSeconds: () => normalizeSeconds,
-  parseDurationText: () => parseDurationText,
-  partsToSeconds: () => partsToSeconds,
-  secondsToParts: () => secondsToParts
+  durationSegmentWidth: () => import_durationMath.durationSegmentWidth,
+  normalizeSeconds: () => import_durationMath.normalizeSeconds,
+  parseDurationText: () => import_durationMath.parseDurationText,
+  partsToSeconds: () => import_durationMath.partsToSeconds,
+  secondsToParts: () => import_durationMath.secondsToParts
 });
 module.exports = __toCommonJS(Duration_exports);
+var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
@@ -40,16 +42,8 @@ var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_tableCellContext = require("../../shared/tableCellContext.cjs");
 var import_utils = require("../../shared/utils.cjs");
+var import_durationMath = require("./durationMath.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const UNIT_SECONDS = {
-  d: 86400,
-  h: 3600,
-  m: 60,
-  s: 1
-};
-const defaultClockIcon = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
-  size: 16
-});
 const defaultPresets = [{
   label: "15m",
   seconds: 900
@@ -69,59 +63,6 @@ const defaultPresets = [{
   label: "8h",
   seconds: 28800
 }];
-function normalizeSeconds(value) {
-  const n = typeof value === "number" ? value : Number(value);
-  if (!Number.isFinite(n) || n < 0) return 0;
-  return Math.floor(n);
-}
-function secondsToParts(total, hideDays) {
-  const s = normalizeSeconds(total);
-  if (hideDays) {
-    return {
-      days: 0,
-      hours: Math.floor(s / 3600),
-      minutes: Math.floor(s % 3600 / 60),
-      seconds: s % 60
-    };
-  }
-  return {
-    days: Math.floor(s / 86400),
-    hours: Math.floor(s % 86400 / 3600),
-    minutes: Math.floor(s % 3600 / 60),
-    seconds: s % 60
-  };
-}
-function partsToSeconds(parts, hideDays) {
-  const days = hideDays ? 0 : Math.max(0, Math.floor(Number(parts.days)) || 0);
-  const hours = Math.max(0, Math.floor(Number(parts.hours)) || 0);
-  const minutes = Math.max(0, Math.floor(Number(parts.minutes)) || 0);
-  const seconds = Math.max(0, Math.floor(Number(parts.seconds)) || 0);
-  return days * 86400 + hours * 3600 + minutes * 60 + seconds;
-}
-function parseDurationText(text) {
-  const trimmed = text.trim().toLowerCase();
-  if (!trimmed) return null;
-  if (/^-?\d+$/.test(trimmed)) return normalizeSeconds(Number(trimmed));
-  const clock = trimmed.match(/^(\d+):(\d{1,2})(?::(\d{1,2}))?$/);
-  if (clock) {
-    return partsToSeconds({
-      days: 0,
-      hours: Number(clock[1]),
-      minutes: Number(clock[2]),
-      seconds: Number(clock[3] || 0)
-    }, true);
-  }
-  let total = 0;
-  let matched = false;
-  const re = /(\d+)\s*(d|h|m|s)\b/g;
-  let m;
-  while (m = re.exec(trimmed)) {
-    matched = true;
-    const unit = m[2];
-    total += Number(m[1]) * UNIT_SECONDS[unit];
-  }
-  return matched ? total : null;
-}
 function DurationSegment({
   id,
   unit,
@@ -135,21 +76,25 @@ function DurationSegment({
   wide,
   placeholder,
   required,
-  hasError
+  hasError,
+  sizeToken
 }) {
   const [draft, setDraft] = (0, import_react2.useState)(null);
   const shown = draft ?? (wide ? String(value) : String(value).padStart(2, "0"));
   const locked = !!(disabled || readOnly);
+  const recipe = (0, import_theme.sizeRecipeForToken)(sizeToken);
+  const segmentWidth = (0, import_durationMath.durationSegmentWidth)(sizeToken, wide ? 3 : 2);
   const commitDraft = () => {
     if (draft == null) return;
-    const n = normalizeSeconds(draft === "" ? 0 : Number(draft));
+    const n = (0, import_durationMath.normalizeSeconds)(draft === "" ? 0 : Number(draft));
     setDraft(null);
     onCommit(n);
   };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     alignItems: "center",
-    gap: "$1",
+    gap: recipe.gap,
     flexShrink: 0,
+    "data-duration-segment": ariaLabel,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
       id,
       value: shown,
@@ -164,10 +109,11 @@ function DurationSegment({
       "aria-invalid": hasError || void 0,
       color: import_colorRamps.formCommonColors.text,
       textAlign: "right",
-      width: wide ? 64 : 48,
-      minWidth: wide ? 64 : 48,
+      width: segmentWidth,
+      minWidth: segmentWidth,
       paddingHorizontal: 0,
       maxLength: wide ? 5 : 3,
+      ...knobProps.controlType,
       ...(import_tamagui.isWeb && disabled ? {
         tabIndex: -1
       } : void 0),
@@ -178,33 +124,36 @@ function DurationSegment({
       },
       onBlur: locked ? void 0 : commitDraft,
       onFocus: locked ? void 0 : () => setDraft(String(value)),
-      onKeyDown: locked ? void 0 : e => {
-        const key = e?.nativeEvent?.key ?? e?.key;
-        if (key === "ArrowUp") {
+      ...(import_tamagui.isWeb ? {
+        fontVariantNumeric: "tabular-nums",
+        onKeyDown: locked ? void 0 : e => {
+          const key = e?.nativeEvent?.key ?? e?.key;
+          if (key === "ArrowUp") {
+            e?.preventDefault?.();
+            setDraft(null);
+            onCommit(value + 1);
+          } else if (key === "ArrowDown") {
+            e?.preventDefault?.();
+            setDraft(null);
+            onCommit(Math.max(0, value - 1));
+          } else if (key === "Enter") {
+            e?.preventDefault?.();
+            commitDraft();
+          }
+        },
+        onPaste: locked ? void 0 : e => {
+          const text = String(e?.clipboardData?.getData?.("text") ?? "");
+          const parsed = (0, import_durationMath.parseDurationText)(text);
+          if (parsed == null) return;
           e?.preventDefault?.();
           setDraft(null);
-          onCommit(value + 1);
-        } else if (key === "ArrowDown") {
-          e?.preventDefault?.();
-          setDraft(null);
-          onCommit(Math.max(0, value - 1));
-        } else if (key === "Enter") {
-          e?.preventDefault?.();
-          commitDraft();
+          onPasteDuration(parsed);
         }
-      },
-      onPaste: locked ? void 0 : e => {
-        const text = String(e?.clipboardData?.getData?.("text") ?? "");
-        const parsed = parseDurationText(text);
-        if (parsed == null) return;
-        e?.preventDefault?.();
-        setDraft(null);
-        onPasteDuration(parsed);
-      }
+      } : {})
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       ...knobProps.body,
+      ...knobProps.controlType,
       color: import_colorRamps.formCommonColors.muted,
-      fontSize: "$2",
       textTransform: "lowercase",
       children: unit
     })]
@@ -226,10 +175,14 @@ function DurationControl({
   size,
   knobProps
 }) {
-  const parts = secondsToParts(seconds, hideDays);
-  const resolvedClock = clockIcon === void 0 ? defaultClockIcon : clockIcon;
+  const parts = (0, import_durationMath.secondsToParts)(seconds, hideDays);
+  const sizeToken = String(size || knobProps.sizeToken);
+  const recipe = (0, import_theme.sizeRecipeForToken)(sizeToken);
+  const resolvedClock = clockIcon === void 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+    size: recipe.iconSize
+  }) : clockIcon;
   const commitParts = (0, import_react2.useCallback)(patch => {
-    onChange(partsToSeconds({
+    onChange((0, import_durationMath.partsToSeconds)({
       ...parts,
       ...patch
     }, hideDays));
@@ -242,12 +195,14 @@ function DurationControl({
       disabled,
       role: "group",
       "aria-label": hasLabel ? void 0 : (0, import_t.t)("Duration"),
+      "data-ring-target": "box",
+      "data-duration-box": "",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           alignItems: "center",
           flex: 1,
           width: "100%",
-          ...knobProps.gap,
+          gap: recipe.gap,
           children: [resolvedClock != null ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
             adornment: "leading",
             children: resolvedClock
@@ -265,7 +220,8 @@ function DurationControl({
             knobProps,
             placeholder,
             required,
-            hasError
+            hasError,
+            sizeToken
           }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(DurationSegment, {
             id: hideDays ? id : `${id}-hours`,
             unit: (0, import_t.t)("h"),
@@ -281,7 +237,8 @@ function DurationControl({
             wide: true,
             placeholder: hideDays ? placeholder : void 0,
             required,
-            hasError
+            hasError,
+            sizeToken
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DurationSegment, {
             id: `${id}-minutes`,
             unit: (0, import_t.t)("m"),
@@ -295,7 +252,8 @@ function DurationControl({
             readOnly,
             knobProps,
             required,
-            hasError
+            hasError,
+            sizeToken
           }), showSeconds ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DurationSegment, {
             id: `${id}-seconds`,
             unit: (0, import_t.t)("s"),
@@ -309,7 +267,8 @@ function DurationControl({
             readOnly,
             knobProps,
             required,
-            hasError
+            hasError,
+            sizeToken
           }) : null]
         })
       })
@@ -319,12 +278,14 @@ function DurationControl({
 function DurationPresets({
   seconds,
   presets,
-  onChange
+  onChange,
+  knobProps
 }) {
   if (presets.length === 0) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-    gap: "$1",
+    ...knobProps.gap,
     flexWrap: "wrap",
+    "data-duration-presets": "",
     children: presets.map(preset => {
       const selected = seconds === preset.seconds;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
@@ -332,6 +293,7 @@ function DurationPresets({
         size: "$2",
         outlined: !selected,
         accent: selected,
+        "data-duration-preset": preset.label,
         onPress: () => onChange(preset.seconds),
         children: preset.label
       }, preset.seconds);
@@ -374,11 +336,13 @@ function Duration({
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   const isControlled = value !== void 0;
-  const [internal, setInternal] = (0, import_react2.useState)(() => normalizeSeconds(defaultValue ?? 0));
-  const seconds = normalizeSeconds(isControlled ? value : internal);
+  const [internal, setInternal] = (0, import_react2.useState)(() => (0, import_durationMath.normalizeSeconds)(defaultValue ?? 0));
+  const seconds = (0, import_durationMath.normalizeSeconds)(isControlled ? value : internal);
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const resolvedSize = size ?? knobProps.sizeToken;
+  const visualHeight = (0, import_utils.getFieldHeight)(resolvedSize);
   const handleChange = (0, import_react2.useCallback)((next, fieldChange) => {
-    const n = normalizeSeconds(next);
+    const n = (0, import_durationMath.normalizeSeconds)(next);
     if (!isControlled) setInternal(n);
     fieldChange?.(n);
     onChange?.(n);
@@ -389,10 +353,14 @@ function Duration({
       label,
       size,
       knobProps,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: knobProps.sizeToken
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: resolvedSize,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: visualHeight,
+          "data-duration-skeleton": ""
+        })
       })
     });
   }
@@ -416,7 +384,8 @@ function Duration({
     }), readOnly || disabled || inTableCell ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DurationPresets, {
       seconds: current,
       presets,
-      onChange: onValueChange
+      onChange: onValueChange,
+      knobProps
     })]
   });
   if (!resolvedForm || !name) {
@@ -441,7 +410,7 @@ function Duration({
     validators: resolvedValidators,
     children: field => {
       const resolvedError = (0, import_utils.getFieldError)(field, error);
-      const fieldValue = normalizeSeconds(field.state.value ?? 0);
+      const fieldValue = (0, import_durationMath.normalizeSeconds)(field.state.value ?? 0);
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
         id,
         label,