refactor(checkbox): ♻️ remove additional wrapper around checkbox in checkboxGroup,

moved orientation based spacing to Touchable component in Checkbox,
fix border radius in checkbox &
fix full width tappable when in CheckboxGroup

Author: Karthik-B-06

src/components/checkbox/Checkbox.tsx

@@ -113,6 +113,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
     isIndeterminate,
     isDisabled,
     style,
+    index,
   } = props;
 
   const hasOnlyLabel = label && !description;
@@ -351,6 +352,9 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
         tailwind.style(
           cx(
             checkboxTheme?.label?.common,
+            index !== 0
+              ? checkboxTheme?.group[checkboxGroupState.orientation]?.spacing
+              : "",
             description ? checkboxTheme?.label?.withDescription : "",
             checkboxTheme.size[size]?.label?.wrapper,
             touchState.pressed

src/components/checkbox/CheckboxGroup.tsx

@@ -12,13 +12,14 @@ import {
   createContext,
   cx,
   getValidChildren,
+  passProps,
   styleAdapter,
 } from "../../utils";
 
 import { CheckboxSizes, CheckboxTheme } from "./Checkbox";
 
 interface CheckboxGroupContext
-  extends Pick<CheckboxGroupProps, "size" | "themeColor">,
+  extends Pick<CheckboxGroupProps, "size" | "themeColor" | "orientation">,
     CheckboxGroupState {}
 
 const [CheckboxGroupProvider, useCheckboxGroupContext] =
@@ -98,17 +99,14 @@ const RNCheckboxGroup: React.FC<Partial<CheckboxGroupProps>> = forwardRef<
       accessibilityRole={Platform.OS === "web" ? "group" : undefined}
       ref={ref}
     >
-      <CheckboxGroupProvider value={{ ...state, size, themeColor }}>
-        {validChildren.map((renderElement, index) => (
-          <Box
-            key={index}
-            style={tailwind.style(
-              cx(checkboxGroupTheme.group[orientation]?.spacing),
-            )}
-          >
-            {renderElement}
-          </Box>
-        ))}
+      <CheckboxGroupProvider
+        value={{ ...state, size, themeColor, orientation }}
+      >
+        {validChildren.map((renderElement, index) =>
+          passProps(renderElement, {
+            index,
+          }),
+        )}
       </CheckboxGroupProvider>
     </Box>
   );

src/theme/defaultTheme/checkbox.ts

@@ -1,7 +1,7 @@
 export const checkbox = {
   group: {
     vertical: {
-      common: "flex flex-col items-start",
+      common: "flex flex-col",
       spacing: "mt-1",
     },
     horizontal: {
@@ -67,7 +67,7 @@ export const checkbox = {
         wrapper: "min-h-9 px-3 py-2 rounded-[10px]",
       },
       icon: {
-        wrapper: "w-5 h-5 text-base rounded",
+        wrapper: "w-5 h-5 text-base rounded-md",
         iconSize: "w-4 h-4",
       },
       text: {