@xsolla/xui-input-time 0.130.0-pr223.1776156979

package/native/index.mjs

@@ -0,0 +1,912 @@
+// src/InputTime.tsx
+import React3, { useRef as useRef2, useState as useState2, useEffect, useCallback as useCallback2 } from "react";
+
+// ../primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+import {
+  Text as RNText,
+  StyleSheet
+} from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(
+    RNText,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Input.tsx
+import { forwardRef } from "react";
+import { TextInput as RNTextInput } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var keyboardTypeMap = {
+  text: "default",
+  number: "numeric",
+  email: "email-address",
+  tel: "phone-pad",
+  url: "url",
+  decimal: "decimal-pad"
+};
+var inputModeToKeyboardType = {
+  none: "default",
+  text: "default",
+  decimal: "decimal-pad",
+  numeric: "number-pad",
+  tel: "phone-pad",
+  search: "default",
+  email: "email-address",
+  url: "url"
+};
+var autoCompleteToTextContentType = {
+  "one-time-code": "oneTimeCode",
+  email: "emailAddress",
+  username: "username",
+  password: "password",
+  "new-password": "newPassword",
+  tel: "telephoneNumber",
+  "postal-code": "postalCode",
+  name: "name"
+};
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
+    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
+    return /* @__PURE__ */ jsx3(
+      RNTextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        secureTextEntry: secureTextEntry || type === "password",
+        keyboardType,
+        textContentType,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// src/InputTime.tsx
+import { useDesignSystem, useId } from "@xsolla/xui-core";
+import { Clock } from "@xsolla/xui-icons-base";
+
+// src/TimeSegment.tsx
+import {
+  useRef,
+  useState,
+  useCallback,
+  forwardRef as forwardRef2,
+  useImperativeHandle
+} from "react";
+
+// src/utils.ts
+function clampValue(value, min, max) {
+  if (isNaN(value)) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function clampHours(value, is12h) {
+  return is12h ? clampValue(value, 1, 12) : clampValue(value, 0, 23);
+}
+function clampMinutes(value) {
+  return clampValue(value, 0, 59);
+}
+function clampSeconds(value) {
+  return clampValue(value, 0, 59);
+}
+function formatSegment(value) {
+  if (value === void 0 || value === null) return "";
+  return value.toString().padStart(2, "0");
+}
+function parseSegmentInput(text) {
+  const num = parseInt(text, 10);
+  return isNaN(num) ? null : num;
+}
+
+// src/TimeSegment.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TimeSegment = forwardRef2(
+  ({
+    value,
+    onChange,
+    onAdvance,
+    onRetreat,
+    min,
+    max,
+    disabled = false,
+    placeholder = "--",
+    fontSize,
+    textColor,
+    placeholderColor,
+    focusColor,
+    "aria-label": ariaLabel,
+    testID
+  }, ref) => {
+    const inputRef = useRef(null);
+    const [editBuffer, setEditBuffer] = useState("");
+    const [isFocused, setIsFocused] = useState(false);
+    const committedRef = useRef(false);
+    const freshFocusRef = useRef(false);
+    useImperativeHandle(ref, () => ({
+      focus: () => inputRef.current?.focus?.()
+    }));
+    const displayValue = isFocused ? editBuffer : value !== null ? formatSegment(value) : "";
+    const commitValue = useCallback(
+      (text) => {
+        const parsed = parseSegmentInput(text);
+        if (parsed !== null) {
+          const clamped = Math.min(max, Math.max(min, parsed));
+          onChange(clamped);
+        }
+      },
+      [onChange, min, max]
+    );
+    const handleFocus = () => {
+      setIsFocused(true);
+      setEditBuffer(value !== null ? formatSegment(value) : "");
+      committedRef.current = false;
+      freshFocusRef.current = true;
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+      if (!committedRef.current && editBuffer) {
+        commitValue(editBuffer);
+      }
+      committedRef.current = false;
+      setEditBuffer("");
+    };
+    const extractTypedDigit = (newText, oldText) => {
+      const newDigits = newText.replace(/\D/g, "");
+      const oldDigits = oldText.replace(/\D/g, "");
+      if (newDigits.length <= oldDigits.length) return "";
+      let remaining = newDigits;
+      for (const ch of oldDigits) {
+        const idx = remaining.indexOf(ch);
+        if (idx !== -1) {
+          remaining = remaining.slice(0, idx) + remaining.slice(idx + 1);
+        }
+      }
+      return remaining.charAt(0);
+    };
+    const handleChangeText = (text) => {
+      let digitsOnly = text.replace(/\D/g, "");
+      if (freshFocusRef.current || committedRef.current) {
+        const typed = extractTypedDigit(text, displayValue);
+        freshFocusRef.current = false;
+        committedRef.current = false;
+        if (!typed) return;
+        digitsOnly = typed;
+      } else {
+        digitsOnly = digitsOnly.slice(-2);
+      }
+      setEditBuffer(digitsOnly);
+      if (digitsOnly.length === 2) {
+        committedRef.current = true;
+        commitValue(digitsOnly);
+        onAdvance();
+      }
+    };
+    const handleKeyDown = (e) => {
+      const key = e.key || e.nativeEvent?.key;
+      if (key === "ArrowUp") {
+        e.preventDefault();
+        const current = value ?? min;
+        const next = current >= max ? min : current + 1;
+        onChange(next);
+        setEditBuffer(formatSegment(next));
+        committedRef.current = true;
+      } else if (key === "ArrowDown") {
+        e.preventDefault();
+        const current = value ?? min;
+        const next = current <= min ? max : current - 1;
+        onChange(next);
+        setEditBuffer(formatSegment(next));
+        committedRef.current = true;
+      } else if (key === "ArrowRight") {
+        onAdvance();
+      } else if (key === "ArrowLeft") {
+        onRetreat();
+      } else if (key === "Backspace" && editBuffer.length === 0) {
+        onChange(null);
+        onRetreat();
+      } else if (key === "Tab") {
+        if (editBuffer) {
+          commitValue(editBuffer);
+        }
+      } else if (key === "Enter") {
+        if (editBuffer) {
+          commitValue(editBuffer);
+        }
+        inputRef.current?.blur?.();
+      }
+    };
+    return /* @__PURE__ */ jsx4(
+      Box,
+      {
+        onPress: () => inputRef.current?.focus?.(),
+        width: fontSize * 1.5,
+        height: fontSize + 8,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: isFocused ? focusColor : "transparent",
+        borderRadius: 4,
+        children: /* @__PURE__ */ jsx4(
+          InputPrimitive,
+          {
+            ref: inputRef,
+            value: displayValue,
+            placeholder,
+            onChangeText: handleChangeText,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            disabled,
+            inputMode: "numeric",
+            color: textColor,
+            fontSize,
+            placeholderTextColor: placeholderColor,
+            "aria-label": ariaLabel,
+            "data-testid": testID,
+            style: {
+              textAlign: "center",
+              width: "100%",
+              padding: 0,
+              border: "none",
+              outline: "none",
+              boxShadow: "none",
+              background: "transparent",
+              caretColor: "transparent"
+            }
+          }
+        )
+      }
+    );
+  }
+);
+TimeSegment.displayName = "TimeSegment";
+
+// src/PeriodToggle.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var PeriodToggle = ({
+  value,
+  onChange,
+  disabled = false,
+  fontSize,
+  textColor,
+  testID
+}) => {
+  const toggle = () => {
+    if (!disabled) {
+      onChange(value === "am" ? "pm" : "am");
+    }
+  };
+  return /* @__PURE__ */ jsx5(
+    Box,
+    {
+      onPress: toggle,
+      cursor: disabled ? "default" : "pointer",
+      justifyContent: "center",
+      alignItems: "center",
+      paddingHorizontal: 4,
+      role: "button",
+      "aria-label": `Time period: ${value.toUpperCase()}. Click to toggle.`,
+      "data-testid": testID,
+      children: /* @__PURE__ */ jsx5(Text, { color: textColor, fontSize, fontWeight: "500", children: value })
+    }
+  );
+};
+
+// src/InputTime.tsx
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+var InputTime = ({
+  value,
+  onChange,
+  showSeconds = false,
+  showPeriod = false,
+  hourCycle = 24,
+  icon = /* @__PURE__ */ jsx6(Clock, {}),
+  size = "md",
+  disabled = false,
+  error,
+  "aria-label": ariaLabel,
+  testID
+}) => {
+  const { theme } = useDesignSystem();
+  const rawId = useId();
+  const safeId = rawId.replace(/:/g, "");
+  const inputId = `input-time-${safeId}`;
+  const errorId = `${inputId}-error`;
+  const [internalState, setInternalState] = useState2(
+    "default"
+  );
+  const segmentRefs = useRef2([]);
+  const is12h = hourCycle === 12;
+  const [hours, setHours] = useState2(value?.hours ?? null);
+  const [minutes, setMinutes] = useState2(value?.minutes ?? null);
+  const [seconds, setSeconds] = useState2(value?.seconds ?? null);
+  const [period, setPeriod] = useState2(value?.period ?? "am");
+  useEffect(() => {
+    if (value) {
+      setHours(value.hours);
+      setMinutes(value.minutes);
+      setSeconds(value.seconds ?? null);
+      setPeriod(value.period ?? "am");
+    } else if (value === null) {
+      setHours(null);
+      setMinutes(null);
+      setSeconds(null);
+      setPeriod("am");
+    }
+  }, [value]);
+  const emitChange = useCallback2(
+    (h, m, s, p) => {
+      if (h === null || m === null) {
+        onChange?.(null);
+        return;
+      }
+      const result = {
+        hours: clampHours(h, is12h),
+        minutes: clampMinutes(m)
+      };
+      if (showSeconds) {
+        result.seconds = s !== null ? clampSeconds(s) : 0;
+      }
+      if (showPeriod) {
+        result.period = p;
+      }
+      onChange?.(result);
+    },
+    [onChange, is12h, showSeconds, showPeriod]
+  );
+  const handleHoursChange = (v) => {
+    const clamped = v !== null ? clampHours(v, is12h) : null;
+    setHours(clamped);
+    emitChange(clamped, minutes, seconds, period);
+  };
+  const handleMinutesChange = (v) => {
+    const clamped = v !== null ? clampMinutes(v) : null;
+    setMinutes(clamped);
+    emitChange(hours, clamped, seconds, period);
+  };
+  const handleSecondsChange = (v) => {
+    const clamped = v !== null ? clampSeconds(v) : null;
+    setSeconds(clamped);
+    emitChange(hours, minutes, clamped, period);
+  };
+  const handlePeriodChange = (v) => {
+    setPeriod(v);
+    emitChange(hours, minutes, seconds, v);
+  };
+  const focusSegment = (index) => {
+    segmentRefs.current[index]?.focus?.();
+  };
+  const segmentCount = showSeconds ? 3 : 2;
+  const advanceFrom = (i) => () => {
+    if (i < segmentCount - 1) focusSegment(i + 1);
+  };
+  const retreatFrom = (i) => () => {
+    if (i > 0) focusSegment(i - 1);
+  };
+  const sizeStyles = theme.sizing.input(size);
+  const inputColors = theme.colors.control.input;
+  const isError = !!error;
+  const isFocus = internalState === "focus";
+  let backgroundColor = inputColors.bg;
+  let borderColor = inputColors.border;
+  let outlineColor;
+  if (disabled) {
+    backgroundColor = inputColors.bgDisable;
+    borderColor = inputColors.borderDisable;
+  } else if (isError) {
+    outlineColor = theme.colors.border.alert;
+    if (isFocus) {
+      backgroundColor = theme.colors.control.focus.bg;
+    }
+  } else if (isFocus) {
+    backgroundColor = theme.colors.control.focus.bg;
+    outlineColor = theme.colors.border.brand;
+  }
+  const textColor = disabled ? inputColors.textDisable : inputColors.text;
+  const placeholderColor = inputColors.placeholder;
+  const iconColor = inputColors.placeholder;
+  const paddingConfig = {
+    xl: { vertical: 12, horizontal: 12 },
+    lg: { vertical: 14, horizontal: 12 },
+    md: { vertical: 11, horizontal: 12 },
+    sm: { vertical: 7, horizontal: 10 },
+    xs: { vertical: 7, horizontal: 10 }
+  };
+  const borderRadiusConfig = {
+    xl: 8,
+    lg: 8,
+    md: 8,
+    sm: 4,
+    xs: 4
+  };
+  const iconSizeConfig = {
+    xl: 22,
+    lg: 20,
+    md: 18,
+    sm: 16,
+    xs: 14
+  };
+  const focusOutlineConfig = {
+    xl: { width: 1, offset: -1 },
+    lg: { width: 1, offset: -1 },
+    md: { width: 1, offset: -1 },
+    sm: { width: 1, offset: -1 },
+    xs: { width: 1, offset: -1 }
+  };
+  const padding = paddingConfig[size];
+  const borderRadius = borderRadiusConfig[size];
+  const iconSize = iconSizeConfig[size];
+  const focusOutline = focusOutlineConfig[size];
+  const handleContainerFocus = () => {
+    if (!disabled) setInternalState("focus");
+  };
+  const handleContainerBlur = () => {
+    if (!disabled) setInternalState("default");
+  };
+  const colonColor = disabled ? placeholderColor : textColor;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "column",
+      gap: sizeStyles.fieldGap,
+      width: "100%",
+      testID,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            backgroundColor,
+            borderColor,
+            borderWidth: borderColor !== "transparent" ? 1 : 0,
+            borderRadius,
+            height: sizeStyles.height,
+            paddingVertical: padding.vertical,
+            paddingHorizontal: padding.horizontal,
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 2,
+            position: "relative",
+            style: {
+              ...outlineColor ? {
+                outline: `${focusOutline.width}px solid ${outlineColor}`,
+                outlineOffset: `${focusOutline.offset}px`
+              } : {}
+            },
+            hoverStyle: !disabled && !isFocus && !isError ? {
+              backgroundColor: inputColors.bgHover,
+              borderColor: inputColors.borderHover
+            } : void 0,
+            onFocus: handleContainerFocus,
+            onBlur: handleContainerBlur,
+            role: "group",
+            "aria-label": ariaLabel || "Time input",
+            "aria-describedby": error ? errorId : void 0,
+            children: [
+              icon && /* @__PURE__ */ jsx6(Box, { marginRight: 6, alignItems: "center", justifyContent: "center", children: React3.isValidElement(icon) ? React3.cloneElement(icon, {
+                size: iconSize,
+                color: iconColor
+              }) : icon }),
+              /* @__PURE__ */ jsx6(
+                TimeSegment,
+                {
+                  ref: (el) => {
+                    segmentRefs.current[0] = el;
+                  },
+                  value: hours,
+                  onChange: handleHoursChange,
+                  onAdvance: advanceFrom(0),
+                  onRetreat: retreatFrom(0),
+                  min: is12h ? 1 : 0,
+                  max: is12h ? 12 : 23,
+                  disabled,
+                  placeholder: "--",
+                  fontSize: sizeStyles.fontSize,
+                  textColor,
+                  placeholderColor,
+                  focusColor: theme.colors.background.brand.primary,
+                  "aria-label": "Hours",
+                  testID: testID ? `${testID}-hours` : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                Text,
+                {
+                  color: colonColor,
+                  fontSize: sizeStyles.fontSize,
+                  fontWeight: "500",
+                  children: ":"
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                TimeSegment,
+                {
+                  ref: (el) => {
+                    segmentRefs.current[1] = el;
+                  },
+                  value: minutes,
+                  onChange: handleMinutesChange,
+                  onAdvance: advanceFrom(1),
+                  onRetreat: retreatFrom(1),
+                  min: 0,
+                  max: 59,
+                  disabled,
+                  placeholder: "--",
+                  fontSize: sizeStyles.fontSize,
+                  textColor,
+                  placeholderColor,
+                  focusColor: theme.colors.background.brand.primary,
+                  "aria-label": "Minutes",
+                  testID: testID ? `${testID}-minutes` : void 0
+                }
+              ),
+              showSeconds && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx6(
+                  Text,
+                  {
+                    color: colonColor,
+                    fontSize: sizeStyles.fontSize,
+                    fontWeight: "500",
+                    children: ":"
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  TimeSegment,
+                  {
+                    ref: (el) => {
+                      segmentRefs.current[2] = el;
+                    },
+                    value: seconds,
+                    onChange: handleSecondsChange,
+                    onAdvance: advanceFrom(2),
+                    onRetreat: retreatFrom(2),
+                    min: 0,
+                    max: 59,
+                    disabled,
+                    placeholder: "--",
+                    fontSize: sizeStyles.fontSize,
+                    textColor,
+                    placeholderColor,
+                    focusColor: theme.colors.background.brand.primary,
+                    "aria-label": "Seconds",
+                    testID: testID ? `${testID}-seconds` : void 0
+                  }
+                )
+              ] }),
+              showPeriod && /* @__PURE__ */ jsx6(
+                PeriodToggle,
+                {
+                  value: period,
+                  onChange: handlePeriodChange,
+                  disabled,
+                  fontSize: sizeStyles.fontSize,
+                  textColor,
+                  testID: testID ? `${testID}-period` : void 0
+                }
+              )
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx6(
+          Text,
+          {
+            id: errorId,
+            role: "alert",
+            color: theme.colors.content.alert.primary,
+            fontSize: sizeStyles.fontSize - 2,
+            children: error
+          }
+        )
+      ]
+    }
+  );
+};
+InputTime.displayName = "InputTime";
+export {
+  InputTime
+};
+//# sourceMappingURL=index.mjs.map