feat: labeled checkbox

Author: minheq

src/components/Checkbox/Checkbox.mdx

@@ -15,14 +15,13 @@ Checkbox for boolean values
 <Playground>
   <Toggle initial={false}>
     {({ on, toggle }) => (
-      <FormField label="Checkbox" labelPosition="right">
-        <Checkbox
-          shape="circle"
-          value={on}
-          onValueChange={toggle}
-          size="medium"
-        />
-      </FormField>
+      <Checkbox
+        shape="circle"
+        value={on}
+        onValueChange={toggle}
+        label="Checkbox label"
+        size="medium"
+      />
     )}
   </Toggle>
 </Playground>

src/components/Checkbox/Checkbox.tsx

@@ -10,7 +10,9 @@ import {
 import { ContainerShape, ControlSize, useTheme } from '../../theme';
 import { isControlSize } from '../../utils/ControlSize';
 import { getOverrides, WithOverrides } from '../../utils/Overrides';
+import { OptionalString } from '../../utils/types';
 import { Icon } from '../Icon';
+import { Label, LabelPosition, LabelProps } from '../Typography';
 
 interface CheckboxBaseProps {
   /**
@@ -25,6 +27,17 @@ interface CheckboxBaseProps {
    */
   value: boolean;
 
+  /**
+   * Label of the field.
+   */
+  label?: OptionalString;
+
+  /**
+   * Position of the field.
+   * @default "right"
+   */
+  labelPosition?: LabelPosition;
+
   /**
    * When true, the checkbox is disabled.
    * @default false
@@ -48,6 +61,7 @@ interface CheckboxBaseProps {
 
 export interface CheckboxOverrides {
   Touchable: TouchableProps;
+  Label: LabelProps;
   Check: CheckProps;
 }
 
@@ -59,6 +73,8 @@ export const Checkbox = (props: CheckboxProps) => {
     size = 'medium',
     shape = 'rounded',
     value = false,
+    label,
+    labelPosition = 'right',
     isDisabled = false,
     onValueChange = () => {
       return;
@@ -91,13 +107,15 @@ export const Checkbox = (props: CheckboxProps) => {
 
   return (
     <Touchable {...touchableProps}>
-      <Check
-        value={value}
-        size={size}
-        shape={shape}
-        isDisabled={isDisabled}
-        {...checkProps}
-      />
+      <Label label={label} position={labelPosition}>
+        <Check
+          value={value}
+          size={size}
+          shape={shape}
+          isDisabled={isDisabled}
+          {...checkProps}
+        />
+      </Label>
     </Touchable>
   );
 };

src/components/Form/FormField.tsx

@@ -5,9 +5,13 @@ import { View, ViewProps } from 'react-native';
 import { useTheme } from '../../theme';
 import { getOverrides, getStyle, WithOverrides } from '../../utils/Overrides';
 import { OptionalString } from '../../utils/types';
-import { Label, LabelProps, Text, TextProps } from '../Typography';
-
-type FormFieldLabelPosition = 'top' | 'left' | 'right';
+import {
+  Label,
+  LabelPosition,
+  LabelProps,
+  Text,
+  TextProps,
+} from '../Typography';
 
 interface FormFieldBaseProps {
   /**
@@ -24,7 +28,7 @@ interface FormFieldBaseProps {
    * Position of the field.
    * @default "top"
    */
-  labelPosition?: FormFieldLabelPosition;
+  labelPosition?: LabelPosition;
 
   /**
    * Description of the field.

src/components/Typography/Label.tsx

@@ -7,7 +7,7 @@ import { getOverrides, getStyle, WithOverrides } from '../../utils/Overrides';
 import { OptionalString } from '../../utils/types';
 import { Text, TextProps } from './Text';
 
-type LabelPosition = 'top' | 'left' | 'right';
+export type LabelPosition = 'top' | 'left' | 'right';
 
 interface LabelBaseProps {
   /**
@@ -109,7 +109,6 @@ const StyledWrapper = (props: WrapperProps) => {
       wrapperStyle = {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingLeft: 8,
       };
       break;
     case 'top':