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

package/web/index.mjs

@@ -0,0 +1,856 @@
+// src/InputTime.tsx
+import React4, { useRef as useRef2, useState as useState2, useEffect, useCallback as useCallback2 } from "react";
+
+// ../primitives-web/src/Box.tsx
+import React from "react";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var StyledBox = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  overflow: ${(props) => props.overflow || "visible"};
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = React.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    type,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledBox,
+      {
+        ref,
+        as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// ../primitives-web/src/Text.tsx
+import styled2 from "styled-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StyledText = styled2.span`
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-weight: ${(props) => props.fontWeight || "normal"};
+  font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
+  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
+  white-space: ${(props) => props.whiteSpace || "normal"};
+  text-align: ${(props) => props.textAlign || "inherit"};
+  text-decoration: ${(props) => props.textDecoration || "none"};
+`;
+var Text = ({
+  style,
+  className,
+  id,
+  role,
+  numberOfLines: _numberOfLines,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role
+    }
+  );
+};
+
+// ../primitives-web/src/Input.tsx
+import { forwardRef } from "react";
+import styled3 from "styled-components";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var StyledInput = styled3.input`
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-family: inherit;
+  text-align: inherit;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Override browser autofill background */
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: ${(props) => props.color || "inherit"} !important;
+  }
+`;
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId,
+    ...rest
+  }, ref) => {
+    const handleChange = (e) => {
+      if (onChange) {
+        onChange(e);
+      }
+      if (onChangeText) {
+        onChangeText(e.target.value);
+      }
+    };
+    const inputValue = value !== void 0 ? value : "";
+    return /* @__PURE__ */ jsx3(
+      StyledInput,
+      {
+        ref,
+        id,
+        value: inputValue,
+        name,
+        placeholder,
+        onChange: handleChange,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        type: secureTextEntry ? "password" : type || "text",
+        inputMode,
+        autoComplete,
+        style,
+        color,
+        fontSize,
+        placeholderTextColor,
+        maxLength,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabel,
+        "aria-disabled": ariaDisabled,
+        "data-testid": dataTestId,
+        ...rest
+      }
+    );
+  }
+);
+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: React4.isValidElement(icon) ? React4.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