@bitrise/bitkit 9.12.1-alpha-chakra.4 → 9.12.1-alpha-chakra.5

package/package.json

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

package/src/Components/Card/Card.theme.ts

@@ -0,0 +1,9 @@
+const CardTheme = {
+  baseStyle: {
+    _focusVisible: {
+      boxShadow: 'outline',
+    },
+  },
+};
+
+export default CardTheme;

package/src/Components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { forwardRef, HTMLChakraProps } from '@chakra-ui/react';
+import { forwardRef, HTMLChakraProps, useStyleConfig } from '@chakra-ui/react';
 import { Radii } from '../../Foundations/Radii/Radii';
 import { Shadows } from '../../Foundations/Shadows/Shadows';
 import Box, { BoxProps } from '../Box/Box';
@@ -15,6 +15,8 @@ export interface CardProps extends BoxProps {
  */
 const Card = forwardRef<CardProps, 'div'>((props, ref) => {
   const { withBorder, ...rest } = props;
+  const styles = useStyleConfig('Card');
+
   const properties = {
     backgroundColor: 'white',
     display: 'block',
@@ -28,7 +30,7 @@ const Card = forwardRef<CardProps, 'div'>((props, ref) => {
   if (props.as === 'button' && !(props as HTMLChakraProps<'button'>).type) {
     (properties as HTMLChakraProps<'button'>).type = 'button';
   }
-  return <Box {...properties} ref={ref} />;
+  return <Box __css={styles} {...properties} ref={ref} />;
 });
 
 Card.defaultProps = {

package/src/theme.ts

@@ -1,4 +1,5 @@
 import Button from './Components/Button/Button.theme';
+import Card from './Components/Card/Card.theme';
 import Divider from './Components/Divider/Divider.theme';
 import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
@@ -45,6 +46,7 @@ const theme = {
   },
   components: {
     Button,
+    Card,
     Divider,
     Link,
     Menu,