@xaui/native 0.0.19 → 0.0.21

package/dist/input/index.cjs

@@ -0,0 +1,1321 @@
+"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/components/input/index.ts
+var input_exports = {};
+__export(input_exports, {
+  DateInput: () => DateInput,
+  DateTimeInput: () => DateTimeInput,
+  NumberInput: () => NumberInput,
+  OTPInput: () => OTPInput,
+  TextInput: () => TextInput,
+  TimeInput: () => TimeInput,
+  getDateOrder: () => getDateOrder
+});
+module.exports = __toCommonJS(input_exports);
+
+// src/components/input/input.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+var import_icons = require("@xaui/icons");
+
+// src/components/input/input.hook.ts
+var import_react6 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/input/input.hook.ts
+var sizeMap = {
+  sm: {
+    minHeight: 40,
+    fontSize: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    slotGap: 8,
+    labelSize: 13,
+    helperSize: 12
+  },
+  md: {
+    minHeight: 46,
+    fontSize: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    slotGap: 10,
+    labelSize: 14,
+    helperSize: 13
+  },
+  lg: {
+    minHeight: 52,
+    fontSize: 17,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    slotGap: 12,
+    labelSize: 15,
+    helperSize: 15
+  }
+};
+var useTextInputSizeStyles = (size) => {
+  return (0, import_react6.useMemo)(() => sizeMap[size], [size]);
+};
+var useTextInputRadiusStyles = (radius) => {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    if (radius === "full") {
+      return { borderRadius: theme.borderRadius.full };
+    }
+    return { borderRadius: theme.borderRadius[radius] };
+  }, [radius, theme.borderRadius]);
+};
+var useTextInputVariantStyles = ({
+  themeColor,
+  variant,
+  isFocused,
+  isInvalid,
+  isDisabled
+}) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return (0, import_react6.useMemo)(() => {
+    const focusColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
+    const neutralBorder = (0, import_core.withOpacity)(theme.colors.foreground, 0.1);
+    const textColor = isDisabled ? (0, import_core.withOpacity)(theme.colors.foreground, 0.55) : theme.colors.foreground;
+    const placeholderColor = (0, import_core.withOpacity)(theme.colors.foreground, 0.45);
+    const labelColor = isInvalid ? theme.colors.danger.main : isFocused ? colorScheme.main : (0, import_core.withOpacity)(theme.colors.foreground, 0.8);
+    const helperColor = isInvalid ? theme.colors.danger.main : (0, import_core.withOpacity)(theme.colors.foreground, 0.72);
+    if (variant === "underlined") {
+      return {
+        container: {
+          backgroundColor: "transparent",
+          borderColor: focusColor,
+          borderBottomWidth: isFocused || isInvalid ? 2 : 1
+        },
+        unfocusedBorderColor: neutralBorder,
+        focusedBorderColor: focusColor,
+        textColor,
+        placeholderColor,
+        labelColor,
+        helperColor
+      };
+    }
+    if (variant === "bordered") {
+      return {
+        container: {
+          backgroundColor: theme.colors.background,
+          borderColor: isFocused || isInvalid ? focusColor : neutralBorder,
+          borderWidth: theme.borderWidth.md
+        },
+        unfocusedBorderColor: neutralBorder,
+        focusedBorderColor: focusColor,
+        textColor,
+        placeholderColor,
+        labelColor,
+        helperColor
+      };
+    }
+    if (variant === "faded") {
+      return {
+        container: {
+          backgroundColor: (0, import_core.withOpacity)(colorScheme.background, 0.68),
+          borderColor: isFocused || isInvalid ? focusColor : "transparent",
+          borderWidth: isFocused || isInvalid ? theme.borderWidth.md : 0
+        },
+        unfocusedBorderColor: "transparent",
+        focusedBorderColor: focusColor,
+        textColor,
+        placeholderColor,
+        labelColor,
+        helperColor
+      };
+    }
+    return {
+      container: {
+        backgroundColor: colorScheme.background,
+        borderColor: isFocused || isInvalid ? (0, import_core.withPaletteNumber)(focusColor, 500) : "transparent",
+        borderWidth: isFocused || isInvalid ? theme.borderWidth.md : 0
+      },
+      unfocusedBorderColor: "transparent",
+      focusedBorderColor: (0, import_core.withPaletteNumber)(focusColor, 500),
+      textColor,
+      placeholderColor,
+      labelColor,
+      helperColor
+    };
+  }, [colorScheme, isDisabled, isFocused, isInvalid, theme, variant]);
+};
+
+// src/components/input/input.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
+  container: {
+    width: "100%",
+    gap: 6
+  },
+  noFullWidth: {
+    alignSelf: "flex-start"
+  },
+  inputContainer: {
+    gap: 6
+  },
+  label: {
+    fontWeight: "500"
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  underlinedWrapper: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    paddingHorizontal: 0
+  },
+  slot: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    includeFontPadding: false
+  },
+  clearButton: {
+    justifyContent: "center",
+    alignItems: "center",
+    marginLeft: 6
+  },
+  helperText: {
+    fontWeight: "400"
+  },
+  disabled: {
+    opacity: 0.6
+  }
+});
+
+// src/components/input/input.tsx
+var TextInput = (0, import_react7.forwardRef)(
+  ({
+    value,
+    defaultValue,
+    onValueChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    label,
+    labelPlacement = "outside",
+    description,
+    errorMessage,
+    startContent,
+    endContent,
+    themeColor = "primary",
+    variant = "flat",
+    size = "md",
+    radius = "md",
+    isSecured = false,
+    isClearable = false,
+    isDisabled = false,
+    isReadOnly = false,
+    isInvalid = false,
+    fullWidth = true,
+    customAppearance,
+    ...nativeProps
+  }, forwardedRef) => {
+    const isControlled = typeof value === "string";
+    const [internalValue, setInternalValue] = (0, import_react7.useState)(defaultValue ?? "");
+    const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+    const internalRef = (0, import_react7.useRef)(null);
+    const borderAnimation = (0, import_react7.useRef)(new import_react_native5.Animated.Value(0)).current;
+    const inputValue = isControlled ? value ?? "" : internalValue;
+    const secureTextEntry = nativeProps.secureTextEntry ?? isSecured;
+    const sizeStyles = useTextInputSizeStyles(size);
+    const radiusStyles = useTextInputRadiusStyles(radius);
+    const variantStyles = useTextInputVariantStyles({
+      themeColor,
+      variant,
+      isFocused,
+      isInvalid,
+      isDisabled
+    });
+    (0, import_react7.useEffect)(() => {
+      import_react_native5.Animated.timing(borderAnimation, {
+        toValue: isFocused || isInvalid ? 1 : 0,
+        duration: 200,
+        useNativeDriver: false
+      }).start();
+    }, [borderAnimation, isFocused, isInvalid]);
+    const showClearButton = isClearable && !!inputValue && !isDisabled && !isReadOnly && !secureTextEntry && nativeProps.editable !== false;
+    const editable = nativeProps.editable ?? (!isDisabled && !isReadOnly);
+    const helperText = (0, import_react7.useMemo)(() => {
+      if (isInvalid && errorMessage) {
+        return errorMessage;
+      }
+      return description;
+    }, [description, errorMessage, isInvalid]);
+    const handleChangeText = (text) => {
+      if (!isControlled) {
+        setInternalValue(text);
+      }
+      onValueChange?.(text);
+      onChangeText?.(text);
+    };
+    const handleClear = () => {
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      onValueChange?.("");
+      onChangeText?.("");
+    };
+    const handleWrapperPress = () => {
+      if (isDisabled || isReadOnly || nativeProps.editable === false) return;
+      const inputRef = forwardedRef || internalRef;
+      if (typeof forwardedRef === "function") {
+        internalRef.current?.focus();
+      } else if (inputRef?.current) {
+        inputRef.current.focus();
+      }
+    };
+    return /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.View,
+      {
+        style: [
+          styles.container,
+          !fullWidth && styles.noFullWidth,
+          isDisabled && styles.disabled,
+          customAppearance?.container
+        ]
+      },
+      /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.inputContainer, customAppearance?.inputContainer] }, label && labelPlacement === "outside" && /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native5.Text,
+        {
+          style: [
+            styles.label,
+            {
+              color: variantStyles.labelColor,
+              fontSize: sizeStyles.labelSize
+            },
+            customAppearance?.label
+          ]
+        },
+        label
+      ), /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Pressable, { onPress: handleWrapperPress, disabled: isDisabled || isReadOnly }, /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native5.Animated.View,
+        {
+          style: [
+            styles.inputWrapper,
+            {
+              minHeight: sizeStyles.minHeight,
+              paddingVertical: sizeStyles.paddingVertical,
+              paddingHorizontal: sizeStyles.paddingHorizontal,
+              gap: sizeStyles.slotGap,
+              backgroundColor: variantStyles.container.backgroundColor,
+              borderWidth: variant === "underlined" ? 0 : variantStyles.container.borderWidth,
+              ...variant === "underlined" && {
+                borderBottomWidth: variantStyles.container.borderBottomWidth
+              },
+              borderRadius: variant === "underlined" ? 0 : radiusStyles.borderRadius,
+              ...variant === "underlined" ? {
+                borderBottomColor: borderAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [
+                    variantStyles.unfocusedBorderColor,
+                    variantStyles.focusedBorderColor
+                  ]
+                })
+              } : {
+                borderColor: borderAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [
+                    variantStyles.unfocusedBorderColor,
+                    variantStyles.focusedBorderColor
+                  ]
+                })
+              }
+            },
+            variant === "underlined" && styles.underlinedWrapper,
+            customAppearance?.inputWrapper
+          ]
+        },
+        startContent && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.slot }, startContent),
+        /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: { flex: 1, gap: labelPlacement === "inside" && label ? 2 : 0 } }, label && labelPlacement === "inside" && /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native5.Text,
+          {
+            style: [
+              styles.label,
+              {
+                color: variantStyles.labelColor,
+                fontSize: sizeStyles.helperSize,
+                paddingBottom: 2
+              },
+              customAppearance?.label
+            ]
+          },
+          label
+        ), /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native5.TextInput,
+          {
+            ref: typeof forwardedRef === "function" ? internalRef : forwardedRef || internalRef,
+            value: inputValue,
+            onChangeText: handleChangeText,
+            onFocus: (event) => {
+              setIsFocused(true);
+              onFocus?.(event);
+            },
+            onBlur: (event) => {
+              setIsFocused(false);
+              onBlur?.(event);
+            },
+            editable,
+            secureTextEntry,
+            placeholderTextColor: variantStyles.placeholderColor,
+            style: [
+              styles.input,
+              {
+                color: variantStyles.textColor,
+                fontSize: sizeStyles.fontSize
+              },
+              customAppearance?.input
+            ],
+            ...nativeProps
+          }
+        )),
+        showClearButton ? /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native5.Pressable,
+          {
+            onPress: handleClear,
+            accessibilityLabel: "Clear input",
+            accessibilityRole: "button",
+            style: styles.clearButton
+          },
+          /* @__PURE__ */ import_react7.default.createElement(import_icons.CloseIcon, { size: 16, color: variantStyles.placeholderColor })
+        ) : endContent && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.slot }, endContent)
+      ))),
+      helperText && /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native5.Text,
+        {
+          style: [
+            styles.helperText,
+            {
+              color: variantStyles.helperColor,
+              fontSize: sizeStyles.helperSize
+            },
+            customAppearance?.helperText
+          ]
+        },
+        helperText
+      )
+    );
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/components/input/date-time-input.tsx
+var import_react8 = __toESM(require("react"), 1);
+
+// src/components/input/date-time-input.hook.ts
+var YMD_LOCALES = ["ja", "zh", "ko", "hu", "lt", "mn"];
+var MDY_LOCALES = ["en-US", "en-PH", "en-BZ"];
+var getDateOrder = (locale) => {
+  try {
+    const formatter = new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    });
+    const parts = formatter.formatToParts(new Date(2e3, 0, 2));
+    const order = parts.filter((p) => p.type === "year" || p.type === "month" || p.type === "day").map((p) => p.type);
+    if (order[0] === "year") return "YMD";
+    if (order[0] === "month") return "MDY";
+    return "DMY";
+  } catch {
+    const lang = locale.split("-")[0];
+    if (YMD_LOCALES.includes(locale) || YMD_LOCALES.includes(lang)) return "YMD";
+    if (MDY_LOCALES.includes(locale)) return "MDY";
+    return "DMY";
+  }
+};
+var insertAtPositions = (digits, positions, char) => {
+  let result = "";
+  let digitIndex = 0;
+  for (let i = 0; i < positions.length; i++) {
+    const segLen = positions[i];
+    const segment = digits.slice(digitIndex, digitIndex + segLen);
+    if (!segment) break;
+    if (i > 0) result += char;
+    result += segment;
+    digitIndex += segLen;
+  }
+  return result;
+};
+var formatDateInput = (text, dateOrder, separator) => {
+  const digits = text.replace(/\D/g, "").slice(0, 8);
+  const segments = dateOrder === "YMD" ? [4, 2, 2] : [2, 2, 4];
+  return insertAtPositions(digits, segments, separator);
+};
+var formatTimeInput = (text, granularity, hourCycle) => {
+  const cleaned = text.replace(/[^0-9aApPmM ]/g, "");
+  const digits = cleaned.replace(/\D/g, "");
+  const maxDigits = granularity === "second" ? 6 : 4;
+  const trimmed = digits.slice(0, maxDigits);
+  const segments = granularity === "second" ? [2, 2, 2] : [2, 2];
+  let result = insertAtPositions(trimmed, segments, ":");
+  if (hourCycle === 12 && trimmed.length >= 4) {
+    const ampmMatch = cleaned.match(/[aApP][mM]?/i);
+    if (ampmMatch) {
+      const period = ampmMatch[0].toUpperCase().startsWith("P") ? "PM" : "AM";
+      result += " " + period;
+    }
+  }
+  return result;
+};
+var formatDateTimeInput = (text, dateOrder, separator, granularity, hourCycle) => {
+  const digits = text.replace(/[^0-9aApPmM]/g, "").replace(/[aApPmM]/g, "");
+  const dateDigitCount = 8;
+  const timeDigitCount = granularity === "second" ? 6 : 4;
+  const maxDigits = dateDigitCount + timeDigitCount;
+  const trimmed = digits.replace(/\D/g, "").slice(0, maxDigits);
+  const datePart = trimmed.slice(0, dateDigitCount);
+  const timePart = trimmed.slice(dateDigitCount);
+  let result = formatDateInput(datePart, dateOrder, separator);
+  if (timePart) {
+    const timeSegments = granularity === "second" ? [2, 2, 2] : [2, 2];
+    result += " " + insertAtPositions(timePart, timeSegments, ":");
+    if (hourCycle === 12 && timePart.length >= 4) {
+      const ampmMatch = text.match(/[aApP][mM]?/i);
+      if (ampmMatch) {
+        const period = ampmMatch[0].toUpperCase().startsWith("P") ? "PM" : "AM";
+        result += " " + period;
+      }
+    }
+  }
+  return result;
+};
+var getDatePlaceholder = (dateOrder, separator) => {
+  const parts = {
+    YMD: ["YYYY", "MM", "DD"],
+    DMY: ["DD", "MM", "YYYY"],
+    MDY: ["MM", "DD", "YYYY"]
+  };
+  return parts[dateOrder].join(separator);
+};
+var getTimePlaceholder = (granularity, hourCycle) => {
+  const hour = hourCycle === 12 ? "hh" : "HH";
+  const base = `${hour}:mm`;
+  const withSeconds = granularity === "second" ? `${base}:ss` : base;
+  return hourCycle === 12 ? `${withSeconds} AM` : withSeconds;
+};
+var getDateTimePlaceholder = (dateOrder, separator, granularity, hourCycle) => {
+  return `${getDatePlaceholder(dateOrder, separator)} ${getTimePlaceholder(granularity, hourCycle)}`;
+};
+var getDateMaxLength = (separator) => {
+  return 8 + 2 * separator.length;
+};
+var getTimeMaxLength = (granularity, hourCycle) => {
+  const base = granularity === "second" ? 8 : 5;
+  return hourCycle === 12 ? base + 3 : base;
+};
+var getDateTimeMaxLength = (separator, granularity, hourCycle) => {
+  return getDateMaxLength(separator) + 1 + getTimeMaxLength(granularity, hourCycle);
+};
+
+// src/components/input/date-time-input.tsx
+var DateInput = (0, import_react8.forwardRef)(
+  ({
+    separator = "-",
+    dateOrder,
+    locale = "en-US",
+    placeholder,
+    maxLength,
+    onChangeText,
+    onValueChange,
+    ...props
+  }, ref) => {
+    const resolvedOrder = (0, import_react8.useMemo)(
+      () => dateOrder ?? getDateOrder(locale),
+      [dateOrder, locale]
+    );
+    const handleChangeText = (0, import_react8.useCallback)(
+      (text) => {
+        const formatted = formatDateInput(text, resolvedOrder, separator);
+        onChangeText?.(formatted);
+        onValueChange?.(formatted);
+      },
+      [resolvedOrder, separator, onChangeText, onValueChange]
+    );
+    return /* @__PURE__ */ import_react8.default.createElement(
+      TextInput,
+      {
+        ref,
+        placeholder: placeholder ?? getDatePlaceholder(resolvedOrder, separator),
+        keyboardType: "number-pad",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        maxLength: maxLength ?? getDateMaxLength(separator),
+        onChangeText: handleChangeText,
+        ...props
+      }
+    );
+  }
+);
+var TimeInput = (0, import_react8.forwardRef)(
+  ({
+    granularity = "minute",
+    hourCycle = 24,
+    placeholder,
+    maxLength,
+    onChangeText,
+    onValueChange,
+    ...props
+  }, ref) => {
+    const handleChangeText = (0, import_react8.useCallback)(
+      (text) => {
+        const formatted = formatTimeInput(text, granularity, hourCycle);
+        onChangeText?.(formatted);
+        onValueChange?.(formatted);
+      },
+      [granularity, hourCycle, onChangeText, onValueChange]
+    );
+    return /* @__PURE__ */ import_react8.default.createElement(
+      TextInput,
+      {
+        ref,
+        placeholder: placeholder ?? getTimePlaceholder(granularity, hourCycle),
+        keyboardType: "number-pad",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        maxLength: maxLength ?? getTimeMaxLength(granularity, hourCycle),
+        onChangeText: handleChangeText,
+        ...props
+      }
+    );
+  }
+);
+var DateTimeInput = (0, import_react8.forwardRef)(
+  ({
+    separator = "-",
+    dateOrder,
+    locale = "en-US",
+    granularity = "minute",
+    hourCycle = 24,
+    placeholder,
+    maxLength,
+    onChangeText,
+    onValueChange,
+    ...props
+  }, ref) => {
+    const resolvedOrder = (0, import_react8.useMemo)(
+      () => dateOrder ?? getDateOrder(locale),
+      [dateOrder, locale]
+    );
+    const handleChangeText = (0, import_react8.useCallback)(
+      (text) => {
+        const formatted = formatDateTimeInput(
+          text,
+          resolvedOrder,
+          separator,
+          granularity,
+          hourCycle
+        );
+        onChangeText?.(formatted);
+        onValueChange?.(formatted);
+      },
+      [resolvedOrder, separator, granularity, hourCycle, onChangeText, onValueChange]
+    );
+    return /* @__PURE__ */ import_react8.default.createElement(
+      TextInput,
+      {
+        ref,
+        placeholder: placeholder ?? getDateTimePlaceholder(resolvedOrder, separator, granularity, hourCycle),
+        keyboardType: "number-pad",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        maxLength: maxLength ?? getDateTimeMaxLength(separator, granularity, hourCycle),
+        onChangeText: handleChangeText,
+        ...props
+      }
+    );
+  }
+);
+DateInput.displayName = "DateInput";
+TimeInput.displayName = "TimeInput";
+DateTimeInput.displayName = "DateTimeInput";
+
+// src/components/input/otp-input.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
+
+// src/components/input/otp-input.hook.ts
+var import_react9 = require("react");
+var segmentSizeMap = {
+  sm: { width: 40, height: 40, fontSize: 16 },
+  md: { width: 48, height: 48, fontSize: 20 },
+  lg: { width: 56, height: 56, fontSize: 24 }
+};
+var useOTPSegmentSizeStyles = (size) => {
+  return (0, import_react9.useMemo)(() => segmentSizeMap[size], [size]);
+};
+var useOTPInputState = ({
+  length,
+  value,
+  defaultValue,
+  onValueChange,
+  onComplete,
+  allowedKeys
+}) => {
+  const isControlled = typeof value === "string";
+  const [internalValue, setInternalValue] = (0, import_react9.useState)(
+    defaultValue ?? ""
+  );
+  const [activeIndex, setActiveIndex] = (0, import_react9.useState)(-1);
+  const refs = (0, import_react9.useRef)([]);
+  const currentValue = isControlled ? value : internalValue;
+  const segments = (0, import_react9.useMemo)(() => {
+    const chars = currentValue.split("");
+    return Array.from({ length }, (_, i) => chars[i] ?? "");
+  }, [currentValue, length]);
+  const updateValue = (0, import_react9.useCallback)(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+      if (newValue.length === length) {
+        onComplete?.(newValue);
+      }
+    },
+    [isControlled, length, onValueChange, onComplete]
+  );
+  const handleSegmentChange = (0, import_react9.useCallback)(
+    (index, text) => {
+      if (!text) return;
+      const char = text.slice(-1);
+      if (!allowedKeys.test(char)) return;
+      const chars = currentValue.split("");
+      while (chars.length < length) chars.push("");
+      chars[index] = char;
+      const newValue = chars.join("").replace(/\s+$/, "");
+      updateValue(newValue);
+      if (index < length - 1) {
+        refs.current[index + 1]?.focus();
+      }
+    },
+    [allowedKeys, currentValue, length, updateValue]
+  );
+  const handleSegmentKeyPress = (0, import_react9.useCallback)(
+    (index, key) => {
+      if (key !== "Backspace") return;
+      const chars = currentValue.split("");
+      while (chars.length < length) chars.push("");
+      if (chars[index]) {
+        chars[index] = "";
+        updateValue(chars.join("").replace(/\s+$/, ""));
+        return;
+      }
+      if (index > 0) {
+        chars[index - 1] = "";
+        updateValue(chars.join("").replace(/\s+$/, ""));
+        refs.current[index - 1]?.focus();
+      }
+    },
+    [currentValue, length, updateValue]
+  );
+  const handleSegmentFocus = (0, import_react9.useCallback)((index) => {
+    setActiveIndex(index);
+  }, []);
+  const handleSegmentBlur = (0, import_react9.useCallback)(() => {
+    setActiveIndex(-1);
+  }, []);
+  return {
+    segments,
+    activeIndex,
+    refs,
+    handleSegmentChange,
+    handleSegmentKeyPress,
+    handleSegmentFocus,
+    handleSegmentBlur
+  };
+};
+
+// src/components/input/otp-input.style.ts
+var import_react_native6 = require("react-native");
+var otpStyles = import_react_native6.StyleSheet.create({
+  container: {
+    gap: 6
+  },
+  fullWidth: {
+    width: "100%"
+  },
+  segmentContainer: {
+    flexDirection: "row",
+    gap: 8
+  },
+  segment: {
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden"
+  },
+  segmentText: {
+    fontWeight: "600",
+    textAlign: "center"
+  },
+  securedDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5
+  },
+  hiddenInput: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0
+  },
+  label: {
+    fontWeight: "500"
+  },
+  helperText: {
+    fontWeight: "400"
+  },
+  disabled: {
+    opacity: 0.6
+  }
+});
+
+// src/components/input/otp-input.tsx
+var OTPSegment = ({
+  char,
+  isActive,
+  isSecured,
+  isDisabled,
+  variantStyles,
+  sizeStyles,
+  radiusStyles,
+  customSegment,
+  customSegmentText,
+  inputRef,
+  onChangeText,
+  onKeyPress,
+  onFocus,
+  onBlur
+}) => {
+  const borderAnimation = (0, import_react10.useRef)(new import_react_native7.Animated.Value(0)).current;
+  (0, import_react10.useEffect)(() => {
+    import_react_native7.Animated.timing(borderAnimation, {
+      toValue: isActive ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false
+    }).start();
+  }, [borderAnimation, isActive]);
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native7.Pressable,
+    {
+      onPress: () => {
+        if (!isDisabled) {
+          const inputEl = inputRef;
+          if (typeof inputEl !== "function") return;
+        }
+      },
+      disabled: isDisabled
+    },
+    /* @__PURE__ */ import_react10.default.createElement(
+      import_react_native7.Animated.View,
+      {
+        style: [
+          otpStyles.segment,
+          {
+            width: sizeStyles.width,
+            height: sizeStyles.height,
+            backgroundColor: variantStyles.container.backgroundColor,
+            borderWidth: variantStyles.container.borderWidth ?? 0,
+            borderRadius: radiusStyles.borderRadius,
+            borderColor: borderAnimation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [
+                variantStyles.unfocusedBorderColor,
+                variantStyles.focusedBorderColor
+              ]
+            })
+          },
+          customSegment?.segment
+        ]
+      },
+      char && isSecured ? /* @__PURE__ */ import_react10.default.createElement(
+        import_react_native7.View,
+        {
+          style: [
+            otpStyles.securedDot,
+            { backgroundColor: variantStyles.textColor }
+          ]
+        }
+      ) : /* @__PURE__ */ import_react10.default.createElement(
+        import_react_native7.Text,
+        {
+          style: [
+            otpStyles.segmentText,
+            {
+              color: variantStyles.textColor,
+              fontSize: sizeStyles.fontSize
+            },
+            customSegmentText?.segmentText
+          ]
+        },
+        char
+      ),
+      /* @__PURE__ */ import_react10.default.createElement(
+        import_react_native7.TextInput,
+        {
+          ref: inputRef,
+          style: otpStyles.hiddenInput,
+          value: char,
+          onChangeText,
+          onKeyPress: (e) => onKeyPress(e.nativeEvent.key),
+          onFocus,
+          onBlur,
+          maxLength: 2,
+          keyboardType: "number-pad",
+          editable: !isDisabled,
+          caretHidden: true
+        }
+      )
+    )
+  );
+};
+var OTPInput = ({
+  length = 4,
+  value,
+  defaultValue,
+  onValueChange,
+  onComplete,
+  variant = "flat",
+  size = "md",
+  radius = "md",
+  themeColor = "primary",
+  isDisabled = false,
+  isInvalid = false,
+  isSecured = false,
+  errorMessage,
+  description,
+  label,
+  allowedKeys = /^[0-9]$/,
+  customAppearance,
+  fullWidth = false
+}) => {
+  const sizeStyles = useOTPSegmentSizeStyles(size);
+  const radiusStyles = useTextInputRadiusStyles(radius);
+  const variantStyles = useTextInputVariantStyles({
+    themeColor,
+    variant,
+    isFocused: false,
+    isInvalid,
+    isDisabled
+  });
+  const {
+    segments,
+    activeIndex,
+    refs,
+    handleSegmentChange,
+    handleSegmentKeyPress,
+    handleSegmentFocus,
+    handleSegmentBlur
+  } = useOTPInputState({
+    length,
+    value,
+    defaultValue,
+    onValueChange,
+    onComplete,
+    allowedKeys
+  });
+  const helperText = isInvalid && errorMessage ? errorMessage : description;
+  const helperColor = isInvalid ? variantStyles.helperColor : variantStyles.helperColor;
+  const activeVariantStyles = useTextInputVariantStyles({
+    themeColor,
+    variant,
+    isFocused: true,
+    isInvalid,
+    isDisabled
+  });
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native7.View,
+    {
+      style: [
+        otpStyles.container,
+        fullWidth && otpStyles.fullWidth,
+        isDisabled && otpStyles.disabled,
+        customAppearance?.container
+      ]
+    },
+    label && /* @__PURE__ */ import_react10.default.createElement(
+      import_react_native7.Text,
+      {
+        style: [
+          otpStyles.label,
+          {
+            color: variantStyles.labelColor,
+            fontSize: 14
+          },
+          customAppearance?.label
+        ]
+      },
+      label
+    ),
+    /* @__PURE__ */ import_react10.default.createElement(
+      import_react_native7.View,
+      {
+        style: [otpStyles.segmentContainer, customAppearance?.segmentContainer]
+      },
+      segments.map((char, index) => /* @__PURE__ */ import_react10.default.createElement(
+        OTPSegment,
+        {
+          key: index,
+          char,
+          isActive: activeIndex === index,
+          isSecured,
+          isDisabled,
+          variantStyles: activeIndex === index ? activeVariantStyles : variantStyles,
+          sizeStyles,
+          radiusStyles,
+          customSegment: customAppearance,
+          customSegmentText: customAppearance,
+          inputRef: (ref) => {
+            refs.current[index] = ref;
+          },
+          onChangeText: (text) => handleSegmentChange(index, text),
+          onKeyPress: (key) => handleSegmentKeyPress(index, key),
+          onFocus: () => handleSegmentFocus(index),
+          onBlur: handleSegmentBlur
+        }
+      ))
+    ),
+    helperText && /* @__PURE__ */ import_react10.default.createElement(
+      import_react_native7.Text,
+      {
+        style: [
+          otpStyles.helperText,
+          { color: helperColor, fontSize: 13 },
+          customAppearance?.helperText
+        ]
+      },
+      helperText
+    )
+  );
+};
+OTPInput.displayName = "OTPInput";
+
+// src/components/input/number-input.tsx
+var import_react12 = __toESM(require("react"), 1);
+var import_react_native9 = require("react-native");
+var import_icons2 = require("@xaui/icons");
+var import_core3 = require("@xaui/core");
+
+// src/components/input/number-input.hook.ts
+var import_react11 = require("react");
+var useNumberInputState = ({
+  value,
+  defaultValue,
+  onValueChange,
+  minValue,
+  maxValue,
+  step,
+  formatOptions,
+  locale
+}) => {
+  const isControlled = typeof value === "number";
+  const [internalValue, setInternalValue] = (0, import_react11.useState)(
+    defaultValue
+  );
+  const [isEditing, setIsEditing] = (0, import_react11.useState)(false);
+  const [rawText, setRawText] = (0, import_react11.useState)("");
+  const currentValue = isControlled ? value : internalValue;
+  const formatter = (0, import_react11.useMemo)(() => {
+    if (!formatOptions) return null;
+    return new Intl.NumberFormat(locale, formatOptions);
+  }, [formatOptions, locale]);
+  const displayValue = (0, import_react11.useMemo)(() => {
+    if (isEditing) return rawText;
+    if (currentValue === void 0) return "";
+    if (formatter) return formatter.format(currentValue);
+    return String(currentValue);
+  }, [currentValue, formatter, isEditing, rawText]);
+  const updateValue = (0, import_react11.useCallback)(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+  const clamp = (0, import_react11.useCallback)(
+    (num) => {
+      let clamped = num;
+      if (minValue !== void 0 && clamped < minValue) clamped = minValue;
+      if (maxValue !== void 0 && clamped > maxValue) clamped = maxValue;
+      return clamped;
+    },
+    [minValue, maxValue]
+  );
+  const handleTextChange = (0, import_react11.useCallback)(
+    (text) => {
+      setRawText(text);
+      if (text === "" || text === "-") return;
+      const parsed = parseFloat(text);
+      if (isNaN(parsed)) return;
+      updateValue(parsed);
+    },
+    [updateValue]
+  );
+  const handleFocus = (0, import_react11.useCallback)(() => {
+    setIsEditing(true);
+    setRawText(currentValue !== void 0 ? String(currentValue) : "");
+  }, [currentValue]);
+  const handleBlur = (0, import_react11.useCallback)(() => {
+    setIsEditing(false);
+    if (rawText === "" || rawText === "-") {
+      updateValue(void 0);
+      return;
+    }
+    const parsed = parseFloat(rawText);
+    if (isNaN(parsed)) {
+      updateValue(void 0);
+      return;
+    }
+    updateValue(clamp(parsed));
+  }, [rawText, clamp, updateValue]);
+  const handleClear = (0, import_react11.useCallback)(() => {
+    setRawText("");
+    updateValue(void 0);
+  }, [updateValue]);
+  const canIncrement = maxValue === void 0 || (currentValue ?? 0) + step <= maxValue;
+  const canDecrement = minValue === void 0 || (currentValue ?? 0) - step >= minValue;
+  const handleIncrement = (0, import_react11.useCallback)(() => {
+    const base = currentValue ?? 0;
+    const newValue = clamp(base + step);
+    updateValue(newValue);
+  }, [currentValue, step, clamp, updateValue]);
+  const handleDecrement = (0, import_react11.useCallback)(() => {
+    const base = currentValue ?? 0;
+    const newValue = clamp(base - step);
+    updateValue(newValue);
+  }, [currentValue, step, clamp, updateValue]);
+  return {
+    displayValue,
+    handleTextChange,
+    handleFocus,
+    handleBlur,
+    handleClear,
+    handleIncrement,
+    handleDecrement,
+    canIncrement,
+    canDecrement
+  };
+};
+
+// src/components/input/number-input.style.ts
+var import_react_native8 = require("react-native");
+var numberInputStyles = import_react_native8.StyleSheet.create({
+  stepperContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  stepperButton: {
+    justifyContent: "center",
+    alignItems: "center",
+    width: 28,
+    height: 28,
+    borderRadius: 6
+  },
+  stepperDisabled: {
+    opacity: 0.4
+  }
+});
+
+// src/components/input/number-input.tsx
+var NumberInput = (0, import_react12.forwardRef)(
+  ({
+    value,
+    defaultValue,
+    onValueChange,
+    minValue,
+    maxValue,
+    step = 1,
+    hideStepper = false,
+    formatOptions,
+    locale = "en-US",
+    label,
+    labelPlacement = "outside",
+    description,
+    errorMessage,
+    placeholder,
+    themeColor = "primary",
+    variant = "flat",
+    size = "md",
+    radius = "md",
+    isDisabled = false,
+    isReadOnly = false,
+    isInvalid = false,
+    isClearable = false,
+    fullWidth = true,
+    customAppearance
+  }, ref) => {
+    const theme = useXUITheme();
+    const {
+      displayValue,
+      handleTextChange,
+      handleFocus,
+      handleBlur,
+      handleIncrement,
+      handleDecrement,
+      canIncrement,
+      canDecrement
+    } = useNumberInputState({
+      value,
+      defaultValue,
+      onValueChange,
+      minValue,
+      maxValue,
+      step,
+      formatOptions,
+      locale
+    });
+    const iconColor = (0, import_core3.withOpacity)(theme.colors.foreground, 0.7);
+    const stepperContent = hideStepper || isReadOnly ? void 0 : /* @__PURE__ */ import_react12.default.createElement(
+      import_react_native9.View,
+      {
+        style: [
+          numberInputStyles.stepperContainer,
+          customAppearance?.stepperContainer
+        ]
+      },
+      /* @__PURE__ */ import_react12.default.createElement(
+        import_react_native9.Pressable,
+        {
+          onPress: handleDecrement,
+          disabled: isDisabled || !canDecrement,
+          accessibilityLabel: "Decrease value",
+          accessibilityRole: "button",
+          style: [
+            numberInputStyles.stepperButton,
+            (!canDecrement || isDisabled) && numberInputStyles.stepperDisabled,
+            customAppearance?.stepperButton
+          ]
+        },
+        /* @__PURE__ */ import_react12.default.createElement(import_icons2.RemoveIcon, { size: 16, color: iconColor })
+      ),
+      /* @__PURE__ */ import_react12.default.createElement(
+        import_react_native9.Pressable,
+        {
+          onPress: handleIncrement,
+          disabled: isDisabled || !canIncrement,
+          accessibilityLabel: "Increase value",
+          accessibilityRole: "button",
+          style: [
+            numberInputStyles.stepperButton,
+            (!canIncrement || isDisabled) && numberInputStyles.stepperDisabled,
+            customAppearance?.stepperButton
+          ]
+        },
+        /* @__PURE__ */ import_react12.default.createElement(import_icons2.AddIcon, { size: 16, color: iconColor })
+      )
+    );
+    return /* @__PURE__ */ import_react12.default.createElement(
+      TextInput,
+      {
+        ref,
+        value: displayValue,
+        onChangeText: handleTextChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        label,
+        labelPlacement,
+        description,
+        errorMessage,
+        placeholder,
+        themeColor,
+        variant,
+        size,
+        radius,
+        isDisabled,
+        isReadOnly,
+        isInvalid,
+        isClearable,
+        fullWidth,
+        keyboardType: "numeric",
+        endContent: stepperContent,
+        customAppearance
+      }
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DateInput,
+  DateTimeInput,
+  NumberInput,
+  OTPInput,
+  TextInput,
+  TimeInput,
+  getDateOrder
+});