Lukebailey/infra 386 create a a11y checkbox

package.json

@@ -85,6 +85,8 @@
     "react": "^16.14.0 || ^17.0.0"
   },
   "dependencies": {
-    "@stitches/react": "^1.2.5"
+    "@stitches/react": "^1.2.5",
+    "react-aria": "^3.12.0",
+    "react-stately": "^3.11.0"
   }
 }

src/components/Checkbox.tsx

@@ -0,0 +1,90 @@
+import { useRef } from 'react';
+import { useCheckbox } from 'react-aria';
+import { useToggleState } from 'react-stately';
+import { styled } from '../../stitches.config';
+import { Check16pxIcon } from '../icons';
+
+const Label = styled('label', {
+  '& input:checked:disabled + div': {
+    color: '$gray50',
+  },
+  display: 'block',
+  position: 'relative',
+});
+
+const Input = styled('input', {
+  '&:checked': {
+    backgroundColor: '$brandYellow',
+    borderColor: '$brandYellow',
+  },
+  '&:checked&:disabled': {
+    backgroundColor: '$yellow20',
+    borderColor: '$yellow20',
+  },
+  '&:disabled': {
+    borderColor: '$gray30',
+  },
+  '&:focus': {
+    outline: '2px solid $brandYellow',
+    outlineOffset: '2px',
+  },
+  '&:indeterminate': {
+    borderColor: '$brandYellow',
+    position: 'relative',
+  },
+  '&:indeterminate:after': {
+    backgroundColor: '$brandYellow',
+    content: '""',
+    height: '12px',
+    left: '50%',
+    position: 'absolute',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '12px',
+  },
+  '&[aria-invalid="true"]': {
+    borderColor: '$uiErrorRegular',
+  },
+  appearance: 'none',
+  backgroundColor: '$brandWhite',
+  borderColor: '$gray50',
+  borderRadius: '$4',
+  borderStyle: '$solid',
+  borderWidth: '$thin',
+  height: '24px',
+  margin: '0',
+  position: 'relative',
+  width: '24px',
+});
+
+const IconContainer = styled('div', {
+  left: '50%',
+  position: 'absolute',
+  top: '50%',
+  transform: 'translate(-50%, -50%)',
+});
+
+export const Checkbox = (props: {
+  autoFocus?: boolean;
+  children?: string;
+  defaultSelected?: boolean;
+  isDisabled?: boolean;
+  isIndeterminate?: boolean;
+  validationState?: 'invalid' | 'valid';
+}) => {
+  const state = useToggleState(props);
+  const ref = useRef<HTMLInputElement>(null);
+  const { inputProps } = useCheckbox(props, state, ref);
+
+  return (
+    <Label>
+      <Input {...inputProps} ref={ref} />
+      {state.isSelected && (
+        <IconContainer>
+          <Check16pxIcon />
+        </IconContainer>
+      )}
+      {props.children}
+    </Label>
+  );
+};

src/components/stories/Checkbox.stories.tsx

@@ -0,0 +1,26 @@
+import { styled } from '../../../stitches.config';
+import { Checkbox } from '../Checkbox';
+
+const Wrapper = styled('div', {
+  display: 'flex',
+  flexFlow: 'row wrap',
+  gap: '$16',
+  width: '100%',
+});
+
+export const CheckboxStates = () => (
+  <Wrapper>
+    <Checkbox isDisabled />
+    <Checkbox />
+    <Checkbox defaultSelected />
+    <Checkbox autoFocus defaultSelected />
+    <Checkbox defaultSelected isDisabled />
+    <Checkbox isIndeterminate />
+    <Checkbox validationState="invalid" />
+  </Wrapper>
+);
+
+export default {
+  component: CheckboxStates,
+  title: 'Checkbox',
+};

stitches.config.ts

@@ -14,7 +14,16 @@ export const {
 } = createStitches({
   media: {},
   theme: {
+    borderStyles: {
+      solid: 'solid',
+    },
+    borderWidths: {
+      thin: '2px',
+    },
     colors: colorPrimitives,
+    radii: {
+      4: '4px',
+    },
     space: {
       4: '4px',
       8: '8px',