react-native-input-code-otp/lib/module/components/text-input-otp-slot.js

react-native-input-code-otp is a high-performance and fully customizable OTP input component for React Native, inspired by @shadcn/ui.

"use strict";

import { memo } from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';
import { Caret } from "./caret.js";
import { useTextInputOTP } from "../hooks/use-text-input-otp.js";
import { useSlotBorderStyles } from "../hooks/use-slot-border-styles.js";
import { DEFAULT_DARK_COLOR, SLOT_HEIGHT, SLOT_WIDTH } from "../constants.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function TextInputOTPSlotComponent({
  index,
  isFirst,
  isLast,
  focusedSlotStyles,
  focusedSlotTextStyles,
  slotStyles,
  slotTextStyles,
  ...rest
}) {
  const {
    code,
    currentIndex,
    handlePress,
    caretHidden
  } = useTextInputOTP();
  const isFocused = currentIndex === index;
  const borderStyles = useSlotBorderStyles({
    isFocused,
    isFirst,
    isLast
  });
  const shouldRenderCaret = isFocused && !code[index] && !caretHidden;
  return /*#__PURE__*/_jsxs(Pressable, {
    testID: "text-input-otp-slot",
    onPress: handlePress,
    style: StyleSheet.flatten([styles.slot, borderStyles, isFocused ? focusedSlotStyles : slotStyles]),
    ...rest,
    children: [code[index] && /*#__PURE__*/_jsx(Text, {
      style: StyleSheet.flatten([styles.slotText, isFocused ? focusedSlotTextStyles : slotTextStyles]),
      children: code[index]
    }), shouldRenderCaret && /*#__PURE__*/_jsx(Caret, {})]
  });
}
export const TextInputOTPSlot = /*#__PURE__*/memo(TextInputOTPSlotComponent);
const styles = StyleSheet.create({
  slot: {
    width: SLOT_WIDTH,
    height: SLOT_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center'
  },
  slotText: {
    color: DEFAULT_DARK_COLOR,
    fontSize: 14,
    fontWeight: 'bold'
  }
});
//# sourceMappingURL=text-input-otp-slot.js.map