fix(striker-ui): add CheckboxWithLabel

striker-ui/components/Checkbox.tsx

@@ -1,14 +1,11 @@
 import {
   Checkbox as MUICheckbox,
   checkboxClasses as muiCheckboxClasses,
-  CheckboxProps as MUICheckboxProps,
 } from '@mui/material';
 import { FC } from 'react';
 
 import { GREY } from '../lib/consts/DEFAULT_THEME';
 
-type CheckboxProps = MUICheckboxProps;
-
 const Checkbox: FC<CheckboxProps> = ({ sx, ...checkboxProps }) => (
   <MUICheckbox
     {...{
@@ -24,6 +21,4 @@ const Checkbox: FC<CheckboxProps> = ({ sx, ...checkboxProps }) => (
   />
 );
 
-export type { CheckboxProps };
-
 export default Checkbox;

striker-ui/components/CheckboxWithLabel.tsx

@@ -0,0 +1,30 @@
+import { FormControlLabel } from '@mui/material';
+import { FC, useMemo } from 'react';
+
+import Checkbox from './Checkbox';
+import { BodyText } from './Text';
+
+const CheckboxWithLabel: FC<CheckboxWithLabelProps> = ({
+  checkboxProps,
+  checked,
+  formControlLabelProps,
+  label,
+  onChange,
+}) => {
+  const labelElement = useMemo(
+    () => (typeof label === 'string' ? <BodyText>{label}</BodyText> : label),
+    [label],
+  );
+
+  return (
+    <FormControlLabel
+      {...formControlLabelProps}
+      control={
+        <Checkbox {...checkboxProps} checked={checked} onChange={onChange} />
+      }
+      label={labelElement}
+    />
+  );
+};
+
+export default CheckboxWithLabel;

striker-ui/types/Checkbox.d.ts

@@ -0,0 +1 @@
+type CheckboxProps = import('@mui/material').CheckboxProps;

striker-ui/types/CheckboxWithLabel.d.ts

@@ -0,0 +1,12 @@
+type CheckboxWithLabelOptionalProps = Partial<
+  Pick<CheckboxProps, 'checked' | 'onChange'>
+> & {
+  checkboxProps?: Partial<CheckboxProps>;
+  formControlLabelProps?: Partial<
+    import('@mui/material').FormControlLabelProps
+  >;
+};
+
+type CheckboxWithLabelProps = CheckboxWithLabelOptionalProps & {
+  label: import('@mui/material').FormControlLabelProps['label'];
+};

striker-ui/types/List.d.ts

@@ -1,7 +1,4 @@
-type OnCheckboxChange = Exclude<
+type OnCheckboxChange = Exclude<CheckboxProps['onChange'], undefined>;
-  import('../components/Checkbox').CheckboxProps['onChange'],
-  undefined
->;
 
 type ListOptionalProps<T extends unknown = unknown> = {
   allowCheckAll?: boolean;