@nexara/nativeflow/lib/module/components/Chip/Chip.js

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

"use strict";

import React from 'react';
import { StyleSheet, Pressable, TouchableOpacity } from 'react-native';
import { StyledText, StyledView } from "../StyledComponents/index.js";
import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations.js";
import { useTheme } from "../../hooks/index.js";
import { getChipColors } from "./utils.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const Chip = ({
  title = 'Chip',
  bg,
  titleColor,
  fs,
  br = 7,
  gap = 7,
  paddingV = 9,
  paddingH = 13,
  stroke = 0.9,
  strokeColor,
  rippleColor,
  disabled = false,
  renderLeftIcon,
  renderRightIcon,
  containerStyle,
  textStyle,
  ...rest
}) => {
  const theme = useTheme();
  const {
    buttonTextColor,
    buttonBorderColor,
    backgroundColor
  } = getChipColors({
    theme,
    bg,
    titleColor,
    strokeColor,
    disabled
  });
  const STYLES = StyleSheet.create({
    CONTAINER: {
      flexDirection: 'row',
      alignItems: 'center',
      borderWidth: stroke,
      borderColor: buttonBorderColor,
      backgroundColor: backgroundColor,
      borderRadius: verticalScale(br),
      paddingVertical: verticalScale(paddingV),
      paddingHorizontal: horizontalScale(paddingH),
      gap: horizontalScale(gap)
    },
    TEXT: {
      color: buttonTextColor
    }
  });
  return /*#__PURE__*/_jsx(_Fragment, {
    children: /*#__PURE__*/_jsx(StyledView, {
      alignSelf: "flex-start",
      children: /*#__PURE__*/_jsx(Pressable, {
        android_ripple: {
          color: rippleColor
        },
        ...rest,
        disabled: disabled,
        children: /*#__PURE__*/_jsxs(StyledView, {
          style: [STYLES.CONTAINER, containerStyle],
          children: [renderLeftIcon && /*#__PURE__*/_jsx(TouchableOpacity, {
            disabled: disabled,
            children: renderLeftIcon
          }), /*#__PURE__*/_jsx(StyledText, {
            primary: true,
            variant: "h5",
            fs: fs,
            style: [STYLES.TEXT, textStyle],
            children: title
          }), renderRightIcon && /*#__PURE__*/_jsx(TouchableOpacity, {
            disabled: disabled,
            children: renderRightIcon
          })]
        })
      })
    })
  });
};
export default Chip;
//# sourceMappingURL=Chip.js.map