@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/input/index.js

@@ -1,1462 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/input/input.tsx
-import React, { forwardRef, useMemo as useMemo2, useState, useRef, useEffect } from "react";
-import {
-  Pressable,
-  Text,
-  TextInput as RNTextInput,
-  View,
-  Animated
-} from "react-native";
-import { CloseIcon } from "@xaui/icons";
-
-// src/components/input/input.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor, withOpacity, withPaletteNumber } from "@xaui/core";
-var useTextInputSizeStyles = (size) => {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    const sizeMap = {
-      sm: {
-        minHeight: theme.componentSizes.sm,
-        fontSize: 14,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-        slotGap: 8,
-        labelSize: 13,
-        helperSize: 12
-      },
-      md: {
-        minHeight: theme.componentSizes.md,
-        fontSize: 16,
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        slotGap: 10,
-        labelSize: 14,
-        helperSize: 13
-      },
-      lg: {
-        minHeight: theme.componentSizes.lg,
-        fontSize: 17,
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        slotGap: 12,
-        labelSize: 15,
-        helperSize: 15
-      }
-    };
-    return sizeMap[size];
-  }, [size, theme]);
-};
-var useTextInputRadiusStyles = (radius) => {
-  const theme = useXUITheme();
-  return 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 = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  return useMemo(() => {
-    const focusColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
-    const neutralBorder = withOpacity(theme.colors.foreground, 0.1);
-    const textColor = isDisabled ? withOpacity(theme.colors.foreground, 0.55) : theme.colors.foreground;
-    const placeholderColor = withOpacity(theme.colors.foreground, 0.45);
-    const labelColor = isInvalid ? theme.colors.danger.main : isFocused ? colorScheme.main : withOpacity(theme.colors.foreground, 0.8);
-    const helperColor = isInvalid ? theme.colors.danger.main : 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 === "light") {
-      return {
-        container: {
-          borderColor: isFocused || isInvalid ? focusColor : "transparent",
-          borderWidth: isFocused || isInvalid ? theme.borderWidth.md : 0
-        },
-        unfocusedBorderColor: "transparent",
-        focusedBorderColor: focusColor,
-        textColor,
-        placeholderColor,
-        labelColor,
-        helperColor
-      };
-    }
-    return {
-      container: {
-        backgroundColor: withOpacity(colorScheme.container, 0.5),
-        borderColor: isFocused || isInvalid ? withPaletteNumber(focusColor, 500) : "transparent",
-        borderWidth: isFocused || isInvalid ? theme.borderWidth.md : 0
-      },
-      unfocusedBorderColor: "transparent",
-      focusedBorderColor: withPaletteNumber(focusColor, 500),
-      textColor,
-      placeholderColor,
-      labelColor,
-      helperColor
-    };
-  }, [colorScheme, isDisabled, isFocused, isInvalid, theme, variant]);
-};
-
-// src/components/input/input.style.ts
-import { StyleSheet } from "react-native";
-var styles = 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 = forwardRef(
-  ({
-    value,
-    defaultValue,
-    onValueChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    label,
-    labelPlacement = "outside",
-    description,
-    errorMessage,
-    startContent,
-    endContent,
-    themeColor = "primary",
-    variant = "colored",
-    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] = useState(defaultValue ?? "");
-    const [isFocused, setIsFocused] = useState(false);
-    const internalRef = useRef(null);
-    const borderAnimation = useRef(new 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
-    });
-    useEffect(() => {
-      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 = useMemo2(() => {
-      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__ */ React.createElement(
-      View,
-      {
-        style: [
-          styles.container,
-          !fullWidth && styles.noFullWidth,
-          isDisabled && styles.disabled,
-          customAppearance?.container
-        ]
-      },
-      /* @__PURE__ */ React.createElement(View, { style: [styles.inputContainer, customAppearance?.inputContainer] }, label && labelPlacement === "outside" && /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          style: [
-            styles.label,
-            {
-              color: variantStyles.labelColor,
-              fontSize: sizeStyles.labelSize
-            },
-            customAppearance?.label
-          ]
-        },
-        label
-      ), /* @__PURE__ */ React.createElement(
-        Pressable,
-        {
-          onPress: handleWrapperPress,
-          disabled: isDisabled || isReadOnly
-        },
-        /* @__PURE__ */ React.createElement(
-          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__ */ React.createElement(View, { style: styles.slot }, startContent),
-          /* @__PURE__ */ React.createElement(
-            View,
-            {
-              style: {
-                flex: 1,
-                gap: labelPlacement === "inside" && label ? 2 : 0
-              }
-            },
-            label && labelPlacement === "inside" && /* @__PURE__ */ React.createElement(
-              Text,
-              {
-                style: [
-                  styles.label,
-                  {
-                    color: variantStyles.labelColor,
-                    fontSize: sizeStyles.helperSize,
-                    paddingBottom: 2
-                  },
-                  customAppearance?.label
-                ]
-              },
-              label
-            ),
-            /* @__PURE__ */ React.createElement(
-              RNTextInput,
-              {
-                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__ */ React.createElement(
-            Pressable,
-            {
-              onPress: handleClear,
-              accessibilityLabel: "Clear input",
-              accessibilityRole: "button",
-              style: styles.clearButton
-            },
-            /* @__PURE__ */ React.createElement(CloseIcon, { size: 16, color: variantStyles.placeholderColor })
-          ) : endContent && /* @__PURE__ */ React.createElement(View, { style: styles.slot }, endContent)
-        )
-      )),
-      helperText && /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          style: [
-            styles.helperText,
-            {
-              color: variantStyles.helperColor,
-              fontSize: sizeStyles.helperSize
-            },
-            customAppearance?.helperText
-          ]
-        },
-        helperText
-      )
-    );
-  }
-);
-TextInput.displayName = "TextInput";
-
-// src/components/input/textarea.tsx
-import React2 from "react";
-
-// src/components/input/textarea.style.ts
-import { StyleSheet as StyleSheet2 } from "react-native";
-var textAreaStyles = StyleSheet2.create({
-  inputWrapper: {
-    alignItems: "flex-start"
-  },
-  input: {
-    textAlignVertical: "top"
-  }
-});
-
-// src/components/input/textarea.tsx
-var TextArea = ({
-  minRows = 3,
-  maxRows,
-  size = "md",
-  customAppearance,
-  numberOfLines,
-  textAlignVertical,
-  scrollEnabled,
-  ...props
-}) => {
-  const sizeStyles = useTextInputSizeStyles(size);
-  const lineHeight = Math.round(sizeStyles.fontSize * 1.35);
-  const verticalPadding = sizeStyles.paddingVertical * 2;
-  const normalizedMaxRows = typeof maxRows === "number" ? Math.max(maxRows, minRows) : void 0;
-  const minHeight = minRows * lineHeight + verticalPadding;
-  const maxHeight = typeof normalizedMaxRows === "number" ? normalizedMaxRows * lineHeight + verticalPadding : void 0;
-  return /* @__PURE__ */ React2.createElement(
-    TextInput,
-    {
-      ...props,
-      size,
-      multiline: true,
-      numberOfLines: numberOfLines ?? minRows,
-      textAlignVertical: textAlignVertical ?? "top",
-      scrollEnabled: scrollEnabled ?? !!maxHeight,
-      customAppearance: {
-        ...customAppearance,
-        inputWrapper: [
-          textAreaStyles.inputWrapper,
-          {
-            minHeight,
-            ...maxHeight ? { maxHeight } : {}
-          },
-          customAppearance?.inputWrapper
-        ],
-        input: [
-          textAreaStyles.input,
-          {
-            lineHeight
-          },
-          customAppearance?.input
-        ]
-      }
-    }
-  );
-};
-
-// src/components/input/date-time-input.tsx
-import React3, { forwardRef as forwardRef2, useCallback, useMemo as useMemo3 } from "react";
-
-// 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);
-};
-var pad = (n) => String(n).padStart(2, "0");
-var dateInputValueToDate = (value, dateOrder, separator) => {
-  const parts = value.split(separator);
-  if (parts.length !== 3) return null;
-  let year, month, day;
-  if (dateOrder === "YMD") {
-    year = parseInt(parts[0], 10);
-    month = parseInt(parts[1], 10);
-    day = parseInt(parts[2], 10);
-  } else if (dateOrder === "MDY") {
-    month = parseInt(parts[0], 10);
-    day = parseInt(parts[1], 10);
-    year = parseInt(parts[2], 10);
-  } else {
-    day = parseInt(parts[0], 10);
-    month = parseInt(parts[1], 10);
-    year = parseInt(parts[2], 10);
-  }
-  if (isNaN(year) || isNaN(month) || isNaN(day)) return null;
-  const date = new Date(year, month - 1, day);
-  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
-    return null;
-  return date;
-};
-var dateToDateInputValue = (date, dateOrder, separator) => {
-  const d = typeof date === "string" ? new Date(date) : date;
-  if (isNaN(d.getTime())) return "";
-  const year = String(d.getFullYear());
-  const month = pad(d.getMonth() + 1);
-  const day = pad(d.getDate());
-  if (dateOrder === "YMD") return [year, month, day].join(separator);
-  if (dateOrder === "MDY") return [month, day, year].join(separator);
-  return [day, month, year].join(separator);
-};
-var timeInputValueToDate = (value, options = {}) => {
-  const { hourCycle = 24 } = options;
-  const isPM = /pm$/i.test(value);
-  const isAM = /am$/i.test(value);
-  const cleaned = value.replace(/\s*(am|pm)$/i, "").trim();
-  const segments = cleaned.split(":");
-  let hours = parseInt(segments[0], 10);
-  const minutes = parseInt(segments[1] ?? "0", 10);
-  const seconds = parseInt(segments[2] ?? "0", 10);
-  if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) return null;
-  if (hourCycle === 12) {
-    if (isPM && hours !== 12) hours += 12;
-    if (isAM && hours === 12) hours = 0;
-  }
-  const date = /* @__PURE__ */ new Date();
-  date.setHours(hours, minutes, seconds, 0);
-  return date;
-};
-var dateToTimeInputValue = (date, options = {}) => {
-  const { granularity = "minute", hourCycle = 24 } = options;
-  const d = typeof date === "string" ? new Date(date) : date;
-  if (isNaN(d.getTime())) return "";
-  let hours = d.getHours();
-  const minutes = pad(d.getMinutes());
-  const seconds = pad(d.getSeconds());
-  if (hourCycle === 12) {
-    const period = hours >= 12 ? "PM" : "AM";
-    hours = hours % 12 || 12;
-    const base2 = `${pad(hours)}:${minutes}`;
-    return granularity === "second" ? `${base2}:${seconds} ${period}` : `${base2} ${period}`;
-  }
-  const base = `${pad(hours)}:${minutes}`;
-  return granularity === "second" ? `${base}:${seconds}` : base;
-};
-var dateTimeInputValueToDate = (value, dateOrder, options = {}) => {
-  const { separator = "-", hourCycle = 24 } = options;
-  const spaceIndex = value.indexOf(" ");
-  if (spaceIndex === -1) return null;
-  const date = dateInputValueToDate(value.slice(0, spaceIndex), dateOrder, separator);
-  if (!date) return null;
-  const timePart = value.slice(spaceIndex + 1);
-  const timed = timeInputValueToDate(timePart, { hourCycle });
-  if (!timed) return null;
-  date.setHours(timed.getHours(), timed.getMinutes(), timed.getSeconds(), 0);
-  return date;
-};
-var dateToDateTimeInputValue = (date, dateOrder, options = {}) => {
-  const { separator = "-", granularity = "minute", hourCycle = 24 } = options;
-  const d = typeof date === "string" ? new Date(date) : date;
-  if (isNaN(d.getTime())) return "";
-  const datePart = dateToDateInputValue(d, dateOrder, separator);
-  const timePart = dateToTimeInputValue(d, { granularity, hourCycle });
-  return `${datePart} ${timePart}`;
-};
-
-// src/components/input/date-time-input.tsx
-var DateInput = forwardRef2(
-  ({
-    separator = "-",
-    dateOrder,
-    locale = "en-US",
-    placeholder,
-    maxLength,
-    onChangeText,
-    onValueChange,
-    ...props
-  }, ref) => {
-    const resolvedOrder = useMemo3(
-      () => dateOrder ?? getDateOrder(locale),
-      [dateOrder, locale]
-    );
-    const handleChangeText = useCallback(
-      (text) => {
-        const formatted = formatDateInput(text, resolvedOrder, separator);
-        onChangeText?.(formatted);
-        onValueChange?.(formatted);
-      },
-      [resolvedOrder, separator, onChangeText, onValueChange]
-    );
-    return /* @__PURE__ */ React3.createElement(
-      TextInput,
-      {
-        ref,
-        placeholder: placeholder ?? getDatePlaceholder(resolvedOrder, separator),
-        keyboardType: "number-pad",
-        autoCapitalize: "none",
-        autoCorrect: false,
-        maxLength: maxLength ?? getDateMaxLength(separator),
-        onChangeText: handleChangeText,
-        ...props
-      }
-    );
-  }
-);
-var TimeInput = forwardRef2(
-  ({
-    granularity = "minute",
-    hourCycle = 24,
-    placeholder,
-    maxLength,
-    onChangeText,
-    onValueChange,
-    ...props
-  }, ref) => {
-    const handleChangeText = useCallback(
-      (text) => {
-        const formatted = formatTimeInput(text, granularity, hourCycle);
-        onChangeText?.(formatted);
-        onValueChange?.(formatted);
-      },
-      [granularity, hourCycle, onChangeText, onValueChange]
-    );
-    return /* @__PURE__ */ React3.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 = forwardRef2(
-  ({
-    separator = "-",
-    dateOrder,
-    locale = "en-US",
-    granularity = "minute",
-    hourCycle = 24,
-    placeholder,
-    maxLength,
-    onChangeText,
-    onValueChange,
-    ...props
-  }, ref) => {
-    const resolvedOrder = useMemo3(
-      () => dateOrder ?? getDateOrder(locale),
-      [dateOrder, locale]
-    );
-    const handleChangeText = useCallback(
-      (text) => {
-        const formatted = formatDateTimeInput(
-          text,
-          resolvedOrder,
-          separator,
-          granularity,
-          hourCycle
-        );
-        onChangeText?.(formatted);
-        onValueChange?.(formatted);
-      },
-      [resolvedOrder, separator, granularity, hourCycle, onChangeText, onValueChange]
-    );
-    return /* @__PURE__ */ React3.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
-import React4, { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3 } from "react";
-import {
-  Animated as Animated2,
-  Pressable as Pressable2,
-  Text as Text2,
-  TextInput as RNTextInput2,
-  View as View2
-} from "react-native";
-import { withOpacity as withOpacity2 } from "@xaui/core";
-
-// src/components/input/otp-input.hook.ts
-import { useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "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 useMemo4(() => segmentSizeMap[size], [size]);
-};
-var useOTPInputState = ({
-  length,
-  value,
-  defaultValue,
-  onValueChange,
-  onComplete,
-  allowedKeys
-}) => {
-  const isControlled = typeof value === "string";
-  const [internalValue, setInternalValue] = useState2(defaultValue ?? "");
-  const [activeIndex, setActiveIndex] = useState2(-1);
-  const refs = useRef2([]);
-  const currentValue = isControlled ? value : internalValue;
-  const segments = useMemo4(() => {
-    const chars = currentValue.split("");
-    return Array.from({ length }, (_, i) => chars[i] ?? "");
-  }, [currentValue, length]);
-  const updateValue = useCallback2(
-    (newValue) => {
-      if (!isControlled) {
-        setInternalValue(newValue);
-      }
-      onValueChange?.(newValue);
-      if (newValue.length === length) {
-        onComplete?.(newValue);
-      }
-    },
-    [isControlled, length, onValueChange, onComplete]
-  );
-  const handleSegmentChange = useCallback2(
-    (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 = useCallback2(
-    (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 = useCallback2((index) => {
-    setActiveIndex(index);
-  }, []);
-  const handleSegmentBlur = useCallback2(() => {
-    setActiveIndex(-1);
-  }, []);
-  return {
-    segments,
-    activeIndex,
-    refs,
-    handleSegmentChange,
-    handleSegmentKeyPress,
-    handleSegmentFocus,
-    handleSegmentBlur
-  };
-};
-
-// src/components/input/otp-input.style.ts
-import { StyleSheet as StyleSheet3 } from "react-native";
-var otpStyles = StyleSheet3.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
-  },
-  underline: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 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,
-  onPress
-}) => {
-  const borderAnimation = useRef3(new Animated2.Value(0)).current;
-  const isUnderlined = variantStyles.container.borderBottomWidth !== void 0;
-  useEffect2(() => {
-    Animated2.timing(borderAnimation, {
-      toValue: isActive ? 1 : 0,
-      duration: 200,
-      useNativeDriver: false
-    }).start();
-  }, [borderAnimation, isActive]);
-  const unfocusedLineColor = isUnderlined ? withOpacity2(variantStyles.focusedBorderColor, 0.35) : variantStyles.unfocusedBorderColor;
-  const animatedBorderColor = borderAnimation.interpolate({
-    inputRange: [0, 1],
-    outputRange: [unfocusedLineColor, variantStyles.focusedBorderColor]
-  });
-  return /* @__PURE__ */ React4.createElement(
-    Pressable2,
-    {
-      onPress: () => {
-        if (!isDisabled) {
-          onPress();
-        }
-      },
-      disabled: isDisabled
-    },
-    /* @__PURE__ */ React4.createElement(
-      Animated2.View,
-      {
-        style: [
-          otpStyles.segment,
-          {
-            width: sizeStyles.width,
-            height: sizeStyles.height,
-            backgroundColor: variantStyles.container.backgroundColor,
-            borderRadius: isUnderlined ? 0 : radiusStyles.borderRadius,
-            borderWidth: isUnderlined ? 0 : variantStyles.container.borderWidth ?? 0,
-            borderColor: isUnderlined ? void 0 : animatedBorderColor
-          },
-          customSegment?.segment
-        ]
-      },
-      char && isSecured ? /* @__PURE__ */ React4.createElement(
-        View2,
-        {
-          style: [
-            otpStyles.securedDot,
-            { backgroundColor: variantStyles.textColor }
-          ]
-        }
-      ) : /* @__PURE__ */ React4.createElement(
-        Text2,
-        {
-          style: [
-            otpStyles.segmentText,
-            {
-              color: variantStyles.textColor,
-              fontSize: sizeStyles.fontSize
-            },
-            customSegmentText?.segmentText
-          ]
-        },
-        char
-      ),
-      /* @__PURE__ */ React4.createElement(
-        RNTextInput2,
-        {
-          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
-        }
-      ),
-      isUnderlined && /* @__PURE__ */ React4.createElement(
-        Animated2.View,
-        {
-          style: [
-            otpStyles.underline,
-            {
-              height: variantStyles.container.borderBottomWidth ?? 1,
-              backgroundColor: animatedBorderColor
-            }
-          ]
-        }
-      )
-    )
-  );
-};
-var OTPInput = ({
-  length = 4,
-  value,
-  defaultValue,
-  onValueChange,
-  onComplete,
-  variant = "colored",
-  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
-  });
-  const focusSegment = useCallback3(
-    (index) => {
-      if (isDisabled) return;
-      refs.current[index]?.focus();
-    },
-    [isDisabled, refs]
-  );
-  const handleContainerPress = useCallback3(() => {
-    const firstEmptyIndex = segments.findIndex((segment) => !segment);
-    const targetIndex = firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
-    focusSegment(targetIndex);
-  }, [focusSegment, length, segments]);
-  return /* @__PURE__ */ React4.createElement(
-    View2,
-    {
-      style: [
-        otpStyles.container,
-        fullWidth && otpStyles.fullWidth,
-        isDisabled && otpStyles.disabled,
-        customAppearance?.container
-      ]
-    },
-    label && /* @__PURE__ */ React4.createElement(
-      Text2,
-      {
-        style: [
-          otpStyles.label,
-          {
-            color: variantStyles.labelColor,
-            fontSize: 14
-          },
-          customAppearance?.label
-        ]
-      },
-      label
-    ),
-    /* @__PURE__ */ React4.createElement(
-      Pressable2,
-      {
-        onPress: handleContainerPress,
-        disabled: isDisabled,
-        style: [otpStyles.segmentContainer, customAppearance?.segmentContainer]
-      },
-      segments.map((char, index) => /* @__PURE__ */ React4.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,
-          onPress: () => focusSegment(index)
-        }
-      ))
-    ),
-    helperText && /* @__PURE__ */ React4.createElement(
-      Text2,
-      {
-        style: [
-          otpStyles.helperText,
-          { color: helperColor, fontSize: 13 },
-          customAppearance?.helperText
-        ]
-      },
-      helperText
-    )
-  );
-};
-OTPInput.displayName = "OTPInput";
-
-// src/components/input/number-input.tsx
-import React5, { forwardRef as forwardRef3 } from "react";
-import { Pressable as Pressable3, View as View3 } from "react-native";
-import { AddIcon, RemoveIcon } from "@xaui/icons";
-import { withOpacity as withOpacity3 } from "@xaui/core";
-
-// src/components/input/number-input.hook.ts
-import { useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
-var useNumberInputState = ({
-  value,
-  defaultValue,
-  onValueChange,
-  minValue,
-  maxValue,
-  step,
-  formatOptions,
-  locale
-}) => {
-  const isControlled = typeof value === "number";
-  const [internalValue, setInternalValue] = useState3(
-    defaultValue
-  );
-  const [isEditing, setIsEditing] = useState3(false);
-  const [rawText, setRawText] = useState3("");
-  const currentValue = isControlled ? value : internalValue;
-  const formatter = useMemo5(() => {
-    if (!formatOptions) return null;
-    return new Intl.NumberFormat(locale, formatOptions);
-  }, [formatOptions, locale]);
-  const displayValue = useMemo5(() => {
-    if (isEditing) return rawText;
-    if (currentValue === void 0) return "";
-    if (formatter) return formatter.format(currentValue);
-    return String(currentValue);
-  }, [currentValue, formatter, isEditing, rawText]);
-  const updateValue = useCallback4(
-    (newValue) => {
-      if (!isControlled) {
-        setInternalValue(newValue);
-      }
-      onValueChange?.(newValue);
-    },
-    [isControlled, onValueChange]
-  );
-  const clamp = useCallback4(
-    (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 = useCallback4(
-    (text) => {
-      setRawText(text);
-      if (text === "" || text === "-") return;
-      const parsed = parseFloat(text);
-      if (isNaN(parsed)) return;
-      updateValue(parsed);
-    },
-    [updateValue]
-  );
-  const handleFocus = useCallback4(() => {
-    setIsEditing(true);
-    setRawText(currentValue !== void 0 ? String(currentValue) : "");
-  }, [currentValue]);
-  const handleBlur = useCallback4(() => {
-    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 = useCallback4(() => {
-    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 = useCallback4(() => {
-    const base = currentValue ?? 0;
-    const newValue = clamp(base + step);
-    updateValue(newValue);
-  }, [currentValue, step, clamp, updateValue]);
-  const handleDecrement = useCallback4(() => {
-    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
-import { StyleSheet as StyleSheet4 } from "react-native";
-var numberInputStyles = StyleSheet4.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 = forwardRef3(
-  ({
-    value,
-    defaultValue,
-    onValueChange,
-    minValue,
-    maxValue,
-    step = 1,
-    hideStepper = false,
-    formatOptions,
-    locale = "en-US",
-    label,
-    labelPlacement = "outside",
-    description,
-    errorMessage,
-    placeholder,
-    themeColor = "primary",
-    variant = "colored",
-    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 = withOpacity3(theme.colors.foreground, 0.7);
-    const stepperContent = hideStepper || isReadOnly ? void 0 : /* @__PURE__ */ React5.createElement(
-      View3,
-      {
-        style: [
-          numberInputStyles.stepperContainer,
-          customAppearance?.stepperContainer
-        ]
-      },
-      /* @__PURE__ */ React5.createElement(
-        Pressable3,
-        {
-          onPress: handleDecrement,
-          disabled: isDisabled || !canDecrement,
-          accessibilityLabel: "Decrease value",
-          accessibilityRole: "button",
-          style: [
-            numberInputStyles.stepperButton,
-            (!canDecrement || isDisabled) && numberInputStyles.stepperDisabled,
-            customAppearance?.stepperButton
-          ]
-        },
-        /* @__PURE__ */ React5.createElement(RemoveIcon, { size: 16, color: iconColor })
-      ),
-      /* @__PURE__ */ React5.createElement(
-        Pressable3,
-        {
-          onPress: handleIncrement,
-          disabled: isDisabled || !canIncrement,
-          accessibilityLabel: "Increase value",
-          accessibilityRole: "button",
-          style: [
-            numberInputStyles.stepperButton,
-            (!canIncrement || isDisabled) && numberInputStyles.stepperDisabled,
-            customAppearance?.stepperButton
-          ]
-        },
-        /* @__PURE__ */ React5.createElement(AddIcon, { size: 16, color: iconColor })
-      )
-    );
-    return /* @__PURE__ */ React5.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";
-export {
-  DateInput,
-  DateTimeInput,
-  NumberInput,
-  OTPInput,
-  TextArea,
-  TextInput,
-  TimeInput,
-  dateInputValueToDate,
-  dateTimeInputValueToDate,
-  dateToDateInputValue,
-  dateToDateTimeInputValue,
-  dateToTimeInputValue,
-  getDateOrder,
-  timeInputValueToDate
-};