@varunindiit/create-rn-starter 1.0.1

package/template/src/components/Common/Checkbox.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { THEME } from "../../theme";
+import { CheckIcon } from "../Icon/SvgIcons";
+import RNText from "../Text/RNText";
+
+interface CheckboxProps {
+  value: boolean;
+  onChange: (v: boolean) => void;
+  label?: string;
+  shape?: "square" | "circle";
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  value,
+  onChange,
+  label,
+  shape = "circle",
+}) => (
+  <Pressable
+    onPress={() => onChange(!value)}
+    style={styles.row}
+    hitSlop={8}
+  >
+    <View
+      style={[
+        styles.box,
+        shape === "circle" && styles.boxCircle,
+        {
+          backgroundColor: value ? THEME.primary : THEME.surface,
+          borderColor: value ? THEME.primary : THEME.inputBorder,
+        },
+      ]}
+    >
+      {value ? (
+        <CheckIcon size={moderateScale(12)} color={THEME.textOnPrimary} />
+      ) : null}
+    </View>
+    {label ? (
+      <RNText size={13} color={THEME.textSecondary}>
+        {label}
+      </RNText>
+    ) : null}
+  </Pressable>
+);
+
+export default Checkbox;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: moderateScale(8),
+  },
+  box: {
+    width: moderateScale(20),
+    height: moderateScale(20),
+    borderRadius: moderateScale(5),
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  boxCircle: { borderRadius: moderateScale(10) },
+});

package/template/src/components/Common/Chip.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { SPACING, THEME } from "../../theme";
+import RNText from "../Text/RNText";
+
+interface ChipProps {
+  label: string;
+  active?: boolean;
+  onPress?: () => void;
+  icon?: React.ReactNode;
+  size?: "sm" | "md";
+  variant?: "filled" | "outline" | "soft";
+}
+
+const Chip: React.FC<ChipProps> = ({
+  label,
+  active,
+  onPress,
+  icon,
+  size = "md",
+  variant = "outline",
+}) => {
+  const bg =
+    active
+      ? THEME.primary
+      : variant === "soft"
+      ? THEME.primaryFaint
+      : variant === "filled"
+      ? THEME.primaryLight
+      : THEME.surface;
+  const border =
+    active
+      ? THEME.primary
+      : variant === "outline"
+      ? THEME.inputBorder
+      : "transparent";
+  const color = active ? THEME.textOnPrimary : THEME.text;
+
+  const Comp = onPress ? Pressable : View;
+  return (
+    <Comp
+      onPress={onPress}
+      style={[
+        styles.base,
+        size === "sm" ? styles.sm : styles.md,
+        {
+          backgroundColor: bg,
+          borderColor: border,
+        },
+      ]}
+    >
+      {icon}
+      <RNText font={active ? "semibold" : "medium"} size={13} color={color}>
+        {label}
+      </RNText>
+    </Comp>
+  );
+};
+
+export default Chip;
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: moderateScale(6),
+    borderRadius: SPACING.radiusPill,
+    borderWidth: 1,
+  },
+  md: {
+    paddingHorizontal: moderateScale(14),
+    paddingVertical: moderateScale(8),
+  },
+  sm: {
+    paddingHorizontal: moderateScale(10),
+    paddingVertical: moderateScale(5),
+  },
+});