@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.91

package/dist/chunk-6CA5WAS6.cjs

@@ -0,0 +1,736 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+function _nullishCoalesce(lhs, rhsFn) {
+  if (lhs != null) {
+    return lhs;
+  } else {
+    return rhsFn();
+  }
+}
+function _optionalChain(ops) {
+  let lastAccessLHS = undefined;
+  let value = ops[0];
+  let i = 1;
+  while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+      return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+      lastAccessLHS = value;
+      value = fn(value);
+    } else if (op === 'call' || op === 'optionalCall') {
+      value = fn((...args) => value.call(lastAccessLHS, ...args));
+      lastAccessLHS = undefined;
+    }
+  }
+  return value;
+}
+var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+var _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/input-otp/input-otp-box.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/input-otp/input-otp.context.ts
+var [InputOTPProvider, useInputOTP] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "InputOTP");
+var [InputOTPBoxProvider, useInputOTPBox] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "InputOTP.Box");
+
+// src/components/input-otp/input-otp-caret.tsx
+
+var _reactnativereanimated = require('react-native-reanimated');
+var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+var _jsxruntime = require('react/jsx-runtime');
+var BLINK_DURATION = 530;
+function InputOTPCaret({
+  style,
+  animation = true,
+  ...props
+}) {
+  const {
+    caretStyle
+  } = useInputOTP();
+  const {
+    slot
+  } = useInputOTPBox();
+  const [styleProps] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const barStyle = [caretStyle, styleProps, style];
+  if (!_optionalChain([slot, 'optionalAccess', _2 => _2.isCaretVisible])) return null;
+  if (!animation) return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
+    style: barStyle
+  });
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, BlinkingCaret, {
+    style: barStyle
+  });
+}
+InputOTPCaret.displayName = "XAUI.InputOTP.Caret";
+const _worklet_13031645367085_init_data = {
+  code: "function chunk6CA5WAS6Cjs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-6CA5WAS6.cjs",
+  sourceMap: "{\"version\":3,\"names\":[\"chunk6CA5WAS6Cjs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-6CA5WAS6.cjs\"],\"mappings\":\"AA8D6E,SAAAA,iBAAMA,CAAA,QAAAC,OAAA,OAAAC,SAAA,CAE/E,MAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC,CACnC\",\"ignoreList\":[]}"
+};
+function BlinkingCaret({
+  style
+}) {
+  const opacity = _reactnativereanimated.useSharedValue.call(void 0, 1);
+  _react.useEffect.call(void 0, () => {
+    opacity.value = _reactnativereanimated.withRepeat.call(void 0, _reactnativereanimated.withTiming.call(void 0, 0, {
+      duration: BLINK_DURATION,
+      easing: _reactnativereanimated.Easing.ease
+    }), -1, true);
+    return () => _reactnativereanimated.cancelAnimation.call(void 0, opacity);
+  }, [opacity]);
+  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunk6CA5WAS6Cjs1Factory({
+    _worklet_13031645367085_init_data,
+    opacity
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunk6CA5WAS6Cjs1 = function () {
+      return {
+        opacity: opacity.value
+      };
+    };
+    chunk6CA5WAS6Cjs1.__closure = {
+      opacity
+    };
+    chunk6CA5WAS6Cjs1.__workletHash = 13031645367085;
+    chunk6CA5WAS6Cjs1.__pluginVersion = "0.7.4";
+    chunk6CA5WAS6Cjs1.__initData = _worklet_13031645367085_init_data;
+    chunk6CA5WAS6Cjs1.__stackDetails = _e;
+    return chunk6CA5WAS6Cjs1;
+  }({
+    _worklet_13031645367085_init_data,
+    opacity
+  }), [opacity]);
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, {
+    style: [style, animatedStyle]
+  });
+}
+
+// src/components/input-otp/input-otp-placeholder.tsx
+
+var InputOTPPlaceholder = _react.forwardRef.call(void 0, function InputOTPPlaceholder2({
+  children,
+  style,
+  maxFontSizeMultiplier = 1.6,
+  ...props
+}, ref) {
+  const {
+    placeholderStyle
+  } = useInputOTP();
+  const {
+    slot
+  } = useInputOTPBox();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const char = _nullishCoalesce(children, () => _optionalChain([slot, 'optionalAccess', _3 => _3.placeholderChar]));
+  if (!char) return null;
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.Text, {
+    ref,
+    maxFontSizeMultiplier,
+    style: [placeholderStyle, styleProps, style],
+    ...rest,
+    children: char
+  });
+});
+InputOTPPlaceholder.displayName = "XAUI.InputOTP.Placeholder";
+
+// src/components/input-otp/input-otp-value.tsx
+
+var InputOTPValue = _react.forwardRef.call(void 0, function InputOTPValue2({
+  children,
+  style,
+  maxFontSizeMultiplier = 1.6,
+  ...props
+}, ref) {
+  const {
+    valueStyle
+  } = useInputOTP();
+  const {
+    slot
+  } = useInputOTPBox();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const char = _nullishCoalesce(children, () => _optionalChain([slot, 'optionalAccess', _4 => _4.char]));
+  if (!char) return null;
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.Text, {
+    ref,
+    maxFontSizeMultiplier,
+    style: [valueStyle, styleProps, style],
+    ...rest,
+    children: char
+  });
+});
+InputOTPValue.displayName = "XAUI.InputOTP.Value";
+
+// src/components/input-otp/input-otp-box.tsx
+
+var InputOTPBox = _react.forwardRef.call(void 0, function InputOTPBox2({
+  index,
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    boxStyle,
+    boxActiveStyle,
+    slots
+  } = useInputOTP();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const slot = slots[index];
+  const context = _react.useMemo.call(void 0, () => ({
+    slot
+  }), [slot]);
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPBoxProvider, {
+    value: context,
+    children: /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
+      ref,
+      style: [_optionalChain([slot, 'optionalAccess', _5 => _5.isActive]) ? boxActiveStyle : boxStyle, styleProps, style],
+      ...rest,
+      children: _nullishCoalesce(children, () => (/* @__PURE__ */_jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
+        children: [/* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPPlaceholder, {}), /* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPValue, {}), /* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPCaret, {})]
+      })))
+    })
+  });
+});
+InputOTPBox.displayName = "XAUI.InputOTP.Box";
+
+// src/components/input-otp/input-otp-group.tsx
+
+var InputOTPGroup = _react.forwardRef.call(void 0, function InputOTPGroup2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    groupStyle,
+    slots,
+    value,
+    maxLength,
+    isFocused,
+    isDisabled,
+    isInvalid
+  } = useInputOTP();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const content = typeof children === "function" ? children({
+    slots,
+    value,
+    maxLength,
+    isFocused,
+    isDisabled,
+    isInvalid
+  }) : children;
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
+    ref,
+    style: [groupStyle, styleProps, style],
+    ...rest,
+    children: content
+  });
+});
+InputOTPGroup.displayName = "XAUI.InputOTP.Group";
+
+// src/components/input-otp/input-otp-separator.tsx
+
+var InputOTPSeparator = _react.forwardRef.call(void 0, function InputOTPSeparator2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    separatorStyle
+  } = useInputOTP();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
+    ref,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    style: [separatorStyle, styleProps, style],
+    ...rest,
+    children
+  });
+});
+InputOTPSeparator.displayName = "XAUI.InputOTP.Separator";
+
+// src/components/input-otp/input-otp.tsx
+
+// src/components/input-otp/input-otp.hook.ts
+
+// src/components/input-otp/input-otp.utils.ts
+function buildSlots({
+  value,
+  maxLength,
+  isFocused,
+  placeholder
+}) {
+  return Array.from({
+    length: maxLength
+  }, (_, index) => {
+    const char = _nullishCoalesce(value[index], () => null);
+    const isActive = isFocused && index === value.length;
+    return {
+      index,
+      char,
+      // A box shows its placeholder only when it has neither a character nor the caret.
+      placeholderChar: char === null && !isActive ? placeholderFor(placeholder, index) : null,
+      isActive,
+      isCaretVisible: isActive && char === null
+    };
+  });
+}
+function placeholderFor(placeholder, index) {
+  if (!placeholder) return null;
+  return placeholder.length === 1 ? placeholder : _nullishCoalesce(placeholder[index], () => null);
+}
+function extractPastedCode(pasted, maxLength) {
+  const match = pasted.match(new RegExp(`(?<!\\d)(\\d{${maxLength}})(?!\\d)`));
+  return _nullishCoalesce(_optionalChain([match, 'optionalAccess', _6 => _6[1]]), () => "");
+}
+function isPaste(text, previous) {
+  return text.length > previous.length + 1;
+}
+var OTP_DIGITS = "^\\d+$";
+var OTP_LETTERS = "^[a-zA-Z]+$";
+var OTP_ALPHANUMERIC = "^[a-zA-Z0-9]+$";
+
+// src/components/input-otp/input-otp.hook.ts
+function useInputOTPState({
+  maxLength,
+  value: valueProp,
+  defaultValue = "",
+  onChangeText: onChangeTextProp,
+  onComplete,
+  pattern,
+  placeholder
+}) {
+  const [value, setValue] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeTextProp
+  });
+  const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+  const inputRef = _react.useRef.call(void 0, null);
+  const regexp = _react.useMemo.call(void 0, () => {
+    if (!pattern) return null;
+    return typeof pattern === "string" ? new RegExp(pattern) : pattern;
+  }, [pattern]);
+  const slots = _react.useMemo.call(void 0, () => buildSlots({
+    value,
+    maxLength,
+    isFocused,
+    placeholder
+  }), [value, maxLength, isFocused, placeholder]);
+  const latest = _react.useRef.call(void 0, {
+    value,
+    maxLength,
+    regexp,
+    onComplete,
+    setValue
+  });
+  latest.current = {
+    value,
+    maxLength,
+    regexp,
+    onComplete,
+    setValue
+  };
+  const onChangeText = _react.useCallback.call(void 0, text => {
+    const current = latest.current;
+    const candidate = isPaste(text, current.value) ? extractPastedCode(text, current.maxLength) : text;
+    const next = candidate.slice(0, current.maxLength);
+    if (next.length > 0 && current.regexp && !current.regexp.test(next)) return;
+    current.setValue(next);
+    if (next.length === current.maxLength) _optionalChain([current, 'access', _7 => _7.onComplete, 'optionalCall', _8 => _8(next)]);
+  }, []);
+  const onFocus = _react.useCallback.call(void 0, () => setIsFocused(true), []);
+  const onBlur = _react.useCallback.call(void 0, () => setIsFocused(false), []);
+  const handle = _react.useMemo.call(void 0, () => ({
+    focus: () => _optionalChain([inputRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]),
+    blur: () => _optionalChain([inputRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.blur, 'call', _14 => _14()]),
+    // Both halves: the native buffer and our value. Clearing one and not the other is
+    // how a cleared field comes back on the next keystroke.
+    clear: () => {
+      _optionalChain([inputRef, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.clear, 'call', _17 => _17()]);
+      latest.current.setValue("");
+    }
+  }), []);
+  return {
+    value,
+    slots,
+    isFocused,
+    inputRef,
+    handle,
+    onChangeText,
+    onFocus,
+    onBlur
+  };
+}
+
+// src/components/input-otp/input-otp.recipe.ts
+var SLOTS = ["root", "group", "box", "value", "placeholder", "caret", "separator"];
+var VARIANT_TOKENS = {
+  primary: {
+    bg: "fieldBackground",
+    border: "fieldBorder",
+    borderFocus: "accent",
+    fg: "fieldForeground"
+  },
+  secondary: {
+    bg: "default",
+    border: "fieldBorder",
+    borderFocus: "accent",
+    fg: "fieldForeground"
+  },
+  tertiary: {
+    border: "fieldBorder",
+    borderFocus: "accent",
+    fg: "fieldForeground"
+  }
+};
+var PLACEHOLDER_OPACITY = 0.5;
+var ACTIVE_BORDER_WIDTH = 2;
+function sizeAxis(step) {
+  const {
+    control,
+    gap,
+    glyph
+  } = step;
+  return theme => {
+    const height = theme.controlHeights[control];
+    const type = {
+      fontSize: theme.fontSizes[glyph],
+      lineHeight: theme.lineHeights[glyph]
+    };
+    return {
+      root: {
+        gap: theme.spacing(gap)
+      },
+      group: {
+        gap: theme.spacing(gap)
+      },
+      box: {
+        height,
+        width: height - theme.spacing(1)
+      },
+      value: type,
+      placeholder: type,
+      // As tall as the character it stands in for, so the box does not change shape
+      // between an empty state and a typed one.
+      caret: {
+        height: theme.lineHeights[glyph],
+        width: theme.spacing(CARET_WIDTH)
+      },
+      separator: {
+        height: theme.spacing(CARET_WIDTH),
+        width: theme.spacing(SEPARATOR_WIDTH)
+      }
+    };
+  };
+}
+var CARET_WIDTH = 0.5;
+var SEPARATOR_WIDTH = 2;
+var SIZES = {
+  sm: {
+    control: "sm",
+    gap: 2,
+    glyph: "md"
+  },
+  md: {
+    control: "md",
+    gap: 2,
+    glyph: "lg"
+  },
+  lg: {
+    control: "lg",
+    gap: 2.5,
+    glyph: "xl"
+  }
+};
+var inputOTPRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: theme => ({
+    root: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    group: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    box: {
+      alignItems: "center",
+      justifyContent: "center",
+      // `lg` and not `field`, though the two are the same twelve points at the default
+      // base. The keys are kept apart on purpose: `field` is the corner a theme moves when
+      // it wants rounder *fields*, and a field is wide — a code box is very nearly square,
+      // 44 by 48 at `md`, where the geometric maximum is 22 and anything near it is a pill
+      // in all but name. Following `field` here would hand this component a shape that was
+      // never decided for it.
+      borderRadius: theme.radius.lg,
+      borderCurve: "continuous",
+      // The one root in the library that clips: the box has no shadow to lose and a
+      // character wider than it would otherwise spill onto its neighbour.
+      overflow: "hidden"
+    },
+    // `semibold`, where a field's own text is `regular`. A code is read at a glance and
+    // then compared character by character, which is the one thing weight helps with.
+    value: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold
+    },
+    placeholder: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      color: theme.colors.fieldPlaceholder,
+      opacity: PLACEHOLDER_OPACITY
+    },
+    caret: {
+      position: "absolute",
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.colors.fieldPlaceholder
+    },
+    // The theme's second separator level rather than the first at half opacity: it is
+    // already the lighter of the two, and it composites the same way in both modes.
+    separator: {
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.colors.separatorSecondary
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land. The border width follows the *presence* of the
+   * border role, so a variant that names none needs no rule of its own to say so.
+   *
+   * The active box takes the ring whichever variant it is: the `focused` state sets the
+   * width as well as the colour. The box has a fixed width and height and centres what it
+   * holds, so an edge appearing moves nothing.
+   */
+  paint: (theme, colors) => ({
+    box: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.field : 0
+    },
+    value: {
+      color: colors.fg
+    }
+  }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: _chunkSL3V7R2Ycjs.radiusAxis.call(void 0, "box"),
+    /**
+     * Declared after `size` and before the states, so a code that is wrong stays wrong
+     * under the finger: the ring below reads `borderFocus`, and the root hands it the
+     * danger colour by suppressing the active state and painting every box instead.
+     */
+    isInvalid: {
+      true: theme => ({
+        box: {
+          borderColor: theme.colors.danger,
+          borderWidth: ACTIVE_BORDER_WIDTH
+        }
+      })
+    }
+  },
+  compoundVariants: [{
+    when: {
+      variant: "primary"
+    },
+    style: theme => ({
+      box: theme.shadows.field
+    })
+  }],
+  /**
+   * `focused` here means **this box is the active one**, not that the component has the
+   * keyboard: the root resolves the recipe twice, once each way, and hands both to the
+   * boxes so none of them resolves anything itself (R5).
+   */
+  states: {
+    focused: (_theme, colors) => ({
+      box: {
+        borderColor: colors.borderFocus,
+        borderWidth: ACTIVE_BORDER_WIDTH
+      }
+    }),
+    disabled: theme => ({
+      root: {
+        opacity: theme.opacity.disabled
+      }
+    })
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "md"
+  }
+});
+
+// src/components/input-otp/input-otp.style.ts
+
+var inputOTPSheet = _reactnative.StyleSheet.create({
+  hiddenInput: {
+    ..._reactnative.StyleSheet.absoluteFillObject,
+    color: "transparent",
+    // A caret of our own is drawn in the active box; the platform's would sit wherever
+    // the invisible text happens to end.
+    ..._reactnative.Platform.select({
+      ios: {
+        opacity: 0.02
+      },
+      default: {
+        opacity: 0
+      }
+    })
+  }
+});
+
+// src/components/input-otp/input-otp.tsx
+
+var InputOTPRoot = _react.forwardRef.call(void 0, function InputOTP({
+  children,
+  maxLength,
+  variant,
+  size,
+  radius,
+  color,
+  value: valueProp,
+  defaultValue,
+  onChangeText,
+  onComplete,
+  pattern,
+  placeholder,
+  isInvalid = false,
+  isDisabled = false,
+  inputMode = "numeric",
+  textInputProps,
+  style,
+  ...props
+}, ref) {
+  const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0);
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const state = useInputOTPState({
+    maxLength,
+    value: valueProp,
+    defaultValue,
+    onChangeText,
+    onComplete,
+    pattern,
+    placeholder
+  });
+  _react.useImperativeHandle.call(void 0, ref, () => state.handle, [state.handle]);
+  const selection = {
+    variant,
+    size,
+    radius,
+    isInvalid: isInvalid ? "true" : void 0
+  };
+  const states = {
+    disabled: isDisabled
+  };
+  const styles = inputOTPRecipe.resolve({
+    theme,
+    selection,
+    states
+  });
+  const activeStyles = isInvalid ? styles : inputOTPRecipe.resolve({
+    theme,
+    selection,
+    states: {
+      ...states,
+      focused: true
+    }
+  });
+  const tint = color ? inputOTPRecipe.tint({
+    theme,
+    color,
+    selection,
+    states
+  }) : void 0;
+  const activeTint = color && !isInvalid ? inputOTPRecipe.tint({
+    theme,
+    color,
+    selection,
+    states: {
+      ...states,
+      focused: true
+    }
+  }) : tint;
+  const context = _react.useMemo.call(void 0, () => ({
+    groupStyle: styles.group,
+    boxStyle: tint ? [styles.box, tint.box] : styles.box,
+    boxActiveStyle: activeTint ? [activeStyles.box, activeTint.box] : activeStyles.box,
+    valueStyle: tint ? [styles.value, tint.value] : styles.value,
+    placeholderStyle: styles.placeholder,
+    caretStyle: styles.caret,
+    separatorStyle: styles.separator,
+    slots: state.slots,
+    value: state.value,
+    maxLength,
+    isFocused: state.isFocused,
+    isDisabled,
+    isInvalid,
+    inputRef: state.inputRef
+  }), [styles, activeStyles, tint, activeTint, state.slots, state.value, state.isFocused, state.inputRef, maxLength, isDisabled, isInvalid]);
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPProvider, {
+    value: context,
+    children: /* @__PURE__ */_jsxruntime.jsxs.call(void 0, _reactnative.View, {
+      style: [styles.root, _optionalChain([tint, 'optionalAccess', _18 => _18.root]), styleProps, style],
+      ...rest,
+      children: [children, /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.TextInput, {
+        ref: state.inputRef,
+        style: inputOTPSheet.hiddenInput,
+        value: state.value,
+        onChangeText: state.onChangeText,
+        onFocus: state.onFocus,
+        onBlur: state.onBlur,
+        editable: !isDisabled,
+        inputMode,
+        caretHidden: true,
+        autoComplete: "one-time-code",
+        textContentType: "oneTimeCode",
+        accessibilityLabel: `${maxLength}-character code`,
+        accessibilityState: {
+          disabled: isDisabled
+        },
+        accessibilityValue: {
+          text: `${state.value.length} of ${maxLength} entered`
+        },
+        ...textInputProps
+      })]
+    })
+  });
+});
+InputOTPRoot.displayName = "XAUI.InputOTP.Root";
+
+// src/components/input-otp/index.ts
+var InputOTP2 = Object.assign(InputOTPRoot, {
+  Group: InputOTPGroup,
+  Box: InputOTPBox,
+  Value: InputOTPValue,
+  Placeholder: InputOTPPlaceholder,
+  Caret: InputOTPCaret,
+  Separator: InputOTPSeparator
+});
+exports.useInputOTP = useInputOTP;
+exports.useInputOTPBox = useInputOTPBox;
+exports.buildSlots = buildSlots;
+exports.extractPastedCode = extractPastedCode;
+exports.OTP_DIGITS = OTP_DIGITS;
+exports.OTP_LETTERS = OTP_LETTERS;
+exports.OTP_ALPHANUMERIC = OTP_ALPHANUMERIC;
+exports.inputOTPRecipe = inputOTPRecipe;
+exports.InputOTP = InputOTP2;