@nexara/nativeflow/lib/module/components/Radio/RadioItem.js

Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.

"use strict";

import { useMemo } from "react";
import { StyledText, StyledView } from "../StyledComponents/index.js";
import { StyleSheet, TouchableOpacity } from "react-native";
import { horizontalScale } from "../../helpers/index.js";
import { useTheme } from "../../hooks/index.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const RadioItem = ({
  size = 22,
  stroke = 2,
  color,
  active = false,
  name,
  disabled,
  label,
  fs,
  fScale = 'base',
  ff,
  labelStyle,
  ...rest
}) => {
  const STYLES = useMemo(customStyles, []);
  const theme = useTheme();
  const themedColor = disabled && theme?.colors.states.disabled || (color ?? theme?.colors.brand.primary);
  const dynamicStyles = {
    borderColor: themedColor,
    borderWidth: stroke,
    padding: 2,
    height: size,
    width: size
  };
  return /*#__PURE__*/_jsx(_Fragment, {
    children: /*#__PURE__*/_jsx(TouchableOpacity, {
      ...rest,
      children: /*#__PURE__*/_jsxs(StyledView, {
        style: STYLES.MAIN_CONT,
        children: [/*#__PURE__*/_jsx(StyledView, {
          style: [STYLES.RADIO_OUTER_CONT, dynamicStyles],
          children: active && /*#__PURE__*/_jsx(StyledView, {
            style: [STYLES.RADIO_INNER_CONT],
            bg: themedColor
          })
        }), label && /*#__PURE__*/_jsx(StyledText, {
          variant: disabled ? 'disabled' : 'primary',
          ff: ff,
          fs: fs,
          fScale: fScale,
          style: labelStyle,
          children: label
        })]
      })
    })
  });
};
export default RadioItem;
const customStyles = () => StyleSheet.create({
  MAIN_CONT: {
    flexDirection: 'row',
    gap: horizontalScale(15),
    alignItems: 'center'
  },
  RADIO_OUTER_CONT: {
    borderRadius: 100,
    overflow: 'hidden'
  },
  RADIO_INNER_CONT: {
    width: '100%',
    height: '100%',
    borderRadius: 100
  }
});
//# sourceMappingURL=RadioItem.js.map