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

package/native/index.js

@@ -0,0 +1,936 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  InputTime: () => InputTime
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/InputTime.tsx
+var import_react3 = __toESM(require("react"));
+
+// ../primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("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 = import_react_native2.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__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.Text,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Input.tsx
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("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 = (0, import_react.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__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native3.TextInput,
+      {
+        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
+var import_xui_core = require("@xsolla/xui-core");
+var import_xui_icons_base = require("@xsolla/xui-icons-base");
+
+// src/TimeSegment.tsx
+var import_react2 = require("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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TimeSegment = (0, import_react2.forwardRef)(
+  ({
+    value,
+    onChange,
+    onAdvance,
+    onRetreat,
+    min,
+    max,
+    disabled = false,
+    placeholder = "--",
+    fontSize,
+    textColor,
+    placeholderColor,
+    focusColor,
+    "aria-label": ariaLabel,
+    testID
+  }, ref) => {
+    const inputRef = (0, import_react2.useRef)(null);
+    const [editBuffer, setEditBuffer] = (0, import_react2.useState)("");
+    const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
+    const committedRef = (0, import_react2.useRef)(false);
+    const freshFocusRef = (0, import_react2.useRef)(false);
+    (0, import_react2.useImperativeHandle)(ref, () => ({
+      focus: () => inputRef.current?.focus?.()
+    }));
+    const displayValue = isFocused ? editBuffer : value !== null ? formatSegment(value) : "";
+    const commitValue = (0, import_react2.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__ */ (0, import_jsx_runtime4.jsx)(
+      Box,
+      {
+        onPress: () => inputRef.current?.focus?.(),
+        width: fontSize * 1.5,
+        height: fontSize + 8,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: isFocused ? focusColor : "transparent",
+        borderRadius: 4,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PeriodToggle = ({
+  value,
+  onChange,
+  disabled = false,
+  fontSize,
+  textColor,
+  testID
+}) => {
+  const toggle = () => {
+    if (!disabled) {
+      onChange(value === "am" ? "pm" : "am");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    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__ */ (0, import_jsx_runtime5.jsx)(Text, { color: textColor, fontSize, fontWeight: "500", children: value })
+    }
+  );
+};
+
+// src/InputTime.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var InputTime = ({
+  value,
+  onChange,
+  showSeconds = false,
+  showPeriod = false,
+  hourCycle = 24,
+  icon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_xui_icons_base.Clock, {}),
+  size = "md",
+  disabled = false,
+  error,
+  "aria-label": ariaLabel,
+  testID
+}) => {
+  const { theme } = (0, import_xui_core.useDesignSystem)();
+  const rawId = (0, import_xui_core.useId)();
+  const safeId = rawId.replace(/:/g, "");
+  const inputId = `input-time-${safeId}`;
+  const errorId = `${inputId}-error`;
+  const [internalState, setInternalState] = (0, import_react3.useState)(
+    "default"
+  );
+  const segmentRefs = (0, import_react3.useRef)([]);
+  const is12h = hourCycle === 12;
+  const [hours, setHours] = (0, import_react3.useState)(value?.hours ?? null);
+  const [minutes, setMinutes] = (0, import_react3.useState)(value?.minutes ?? null);
+  const [seconds, setSeconds] = (0, import_react3.useState)(value?.seconds ?? null);
+  const [period, setPeriod] = (0, import_react3.useState)(value?.period ?? "am");
+  (0, import_react3.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 = (0, import_react3.useCallback)(
+    (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__ */ (0, import_jsx_runtime6.jsxs)(
+    Box,
+    {
+      flexDirection: "column",
+      gap: sizeStyles.fieldGap,
+      width: "100%",
+      testID,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.jsx)(Box, { marginRight: 6, alignItems: "center", justifyContent: "center", children: import_react3.default.isValidElement(icon) ? import_react3.default.cloneElement(icon, {
+                size: iconSize,
+                color: iconColor
+              }) : icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                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__ */ (0, import_jsx_runtime6.jsx)(
+                Text,
+                {
+                  color: colonColor,
+                  fontSize: sizeStyles.fontSize,
+                  fontWeight: "500",
+                  children: ":"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                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__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  Text,
+                  {
+                    color: colonColor,
+                    fontSize: sizeStyles.fontSize,
+                    fontWeight: "500",
+                    children: ":"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  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__ */ (0, import_jsx_runtime6.jsx)(
+                PeriodToggle,
+                {
+                  value: period,
+                  onChange: handlePeriodChange,
+                  disabled,
+                  fontSize: sizeStyles.fontSize,
+                  textColor,
+                  testID: testID ? `${testID}-period` : void 0
+                }
+              )
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Text,
+          {
+            id: errorId,
+            role: "alert",
+            color: theme.colors.content.alert.primary,
+            fontSize: sizeStyles.fontSize - 2,
+            children: error
+          }
+        )
+      ]
+    }
+  );
+};
+InputTime.displayName = "InputTime";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputTime
+});
+//# sourceMappingURL=index.js.map