@bitrise/bitkit 13.194.0 → 13.195.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.194.0",
+  "version": "13.195.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Patterns/GroupHeader/GroupHeader.tsx

@@ -0,0 +1,21 @@
+import { BoxProps } from '@chakra-ui/react';
+import Divider from '../../Components/Divider/Divider';
+import Box from '../../Components/Box/Box';
+import Text from '../../Components/Text/Text';
+
+export type GroupHeaderProps = {
+  label: string;
+} & BoxProps;
+
+const GroupHeader = ({ label, ...rest }: GroupHeaderProps) => {
+  return (
+    <Box alignItems="center" display="flex" gap="16" paddingTop="8" paddingRight="8" paddingBottom="4" {...rest}>
+      <Text as="h6" textStyle="heading/h6" textColor="text/tertiary">
+        {label}
+      </Text>
+      <Divider flexGrow="1" w="auto" />
+    </Box>
+  );
+};
+
+export default GroupHeader;

package/src/index.ts

@@ -220,6 +220,9 @@ export { default as DatePicker, DateRange, useDateRange } from './Components/Dat
 export type { FadeProps } from './Components/Fade/Fade';
 export { default as Fade } from './Components/Fade/Fade';
 
+export type { GroupHeaderProps } from './Patterns/GroupHeader/GroupHeader';
+export { default as GroupHeader } from './Patterns/GroupHeader/GroupHeader';
+
 export type { InputProps } from './Components/Form/Input/Input';
 export { default as Input } from './Components/Form/Input/Input';