@bitrise/bitkit 9.38.4 → 9.39.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.38.4",
+  "version": "9.39.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Checkbox from './Checkbox';
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (props) => <Checkbox {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = {
+  children: 'Checkbox',
+  isDisabled: false,
+  isIndeterminate: false,
+};

package/src/Components/Checkbox/Checkbox.theme.ts

@@ -0,0 +1,46 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const CheckboxTheme: ComponentStyleConfig = {
+  baseStyle: {
+    icon: {
+      color: 'neutral.100',
+    },
+    container: {
+      _disabled: {
+        cursor: 'not-allowed',
+        ':hover > span:first-of-type': {
+          borderColor: 'neutral.90',
+        },
+      },
+      ':hover > span:first-of-type': {
+        borderColor: 'neutral.70',
+      },
+    },
+    control: {
+      width: '24',
+      height: '24',
+      border: '1px solid',
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      boxShadow: 'inner',
+      _checked: {
+        backgroundColor: 'purple.50',
+        _disabled: {
+          backgroundColor: 'neutral.80',
+        },
+      },
+      _hover: {
+        borderColor: 'neutral.70',
+      },
+      _focusVisible: {
+        boxShadow: 'outline',
+      },
+    },
+    label: {
+      userSelect: 'none',
+      _disabled: { color: 'neutral.60' },
+    },
+  },
+};
+
+export default CheckboxTheme;

package/src/Components/Checkbox/Checkbox.tsx

@@ -0,0 +1,14 @@
+import { Checkbox as ChakraCheckbox, CheckboxProps, forwardRef } from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
+
+/**
+ * Checkbox component is used in forms when a user needs to select multiple values from several options.
+ */
+const Checkbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
+  const { isIndeterminate } = props;
+  return <ChakraCheckbox icon={<Icon name={isIndeterminate ? 'MinusClose' : 'Tick'} />} {...props} ref={ref} />;
+});
+
+export type { CheckboxProps };
+
+export default Checkbox;

package/src/index.ts

@@ -117,3 +117,6 @@ export { default as List } from './Components/List/List';
 
 export type { ListItemProps } from './Components/List/ListItem';
 export { default as ListItem } from './Components/List/ListItem';
+
+export type { CheckboxProps } from './Components/Checkbox/Checkbox';
+export { default as Checkbox } from './Components/Checkbox/Checkbox';

package/src/old.ts

@@ -43,9 +43,6 @@ export { default as Base } from './Old/Base/Base';
 export type { Props as BoundsProps } from './Old/Bounds/Bounds';
 export { default as Bounds } from './Old/Bounds/Bounds';
 
-export type { Props as CheckboxProps } from './Old/Checkbox/Checkbox';
-export { default as Checkbox } from './Old/Checkbox/Checkbox';
-
 export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
 export { default as DatePicker } from './Old/DatePicker/DatePicker';
 

package/src/theme.ts

@@ -2,6 +2,7 @@ import Avatar from './Components/Avatar/Avatar.theme';
 import Badge from './Components/Badge/Badge.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
+import Checkbox from './Components/Checkbox/Checkbox.theme';
 import ColorButton from './Components/ColorButton/ColorButton.theme';
 import Dialog from './Components/Dialog/Dialog.theme';
 import Divider from './Components/Divider/Divider.theme';
@@ -65,6 +66,7 @@ const theme = {
     Badge,
     Button,
     Card,
+    Checkbox,
     ColorButton,
     Divider,
     EmptyState,