@bitrise/bitkit 12.23.4 → 12.23.5

package/package.json

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

package/src/Components/{ContentSwitcher/ContentSwitcher.context.ts → SegmentedControl/SegmentedControl.context.ts}

@@ -1,8 +1,8 @@
 import { UseRadioGroupReturn } from '@chakra-ui/react';
 import { createContext } from '@chakra-ui/react-utils';
 
-export interface ContentSwitcherContextType {
+export interface SegmentedControlContextType {
   getRadioProps: UseRadioGroupReturn['getRadioProps'];
   isGroupDisabled?: boolean;
 }
-export const [ContentSwitcherContext, useContentSwitcherContext] = createContext<ContentSwitcherContextType>();
+export const [SegmentedControlContext, useSegmentedControlContext] = createContext<SegmentedControlContextType>();

package/src/Components/{ContentSwitcher/ContentSwitcher.theme.ts → SegmentedControl/SegmentedControl.theme.ts}

@@ -2,7 +2,7 @@ import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 
 const itemHelpers = createMultiStyleConfigHelpers(['container', 'item']);
 
-const ContentSwitcherTheme = itemHelpers.defineMultiStyleConfig({
+const SegmentedControlTheme = itemHelpers.defineMultiStyleConfig({
   baseStyle: {
     container: {
       display: 'flex',
@@ -18,14 +18,14 @@ const ContentSwitcherTheme = itemHelpers.defineMultiStyleConfig({
       cursor: 'pointer',
       fontSize: '3',
       lineHeight: '2.375rem',
-      color: 'purple.10',
+      color: 'neutral.40',
       textAlign: 'center',
+      fontWeight: 'demiBold',
       border: '1px solid',
       borderColor: 'transparent',
       borderRadius: '4',
       _checked: {
-        fontWeight: 'demiBold',
-        color: 'purple.40',
+        color: 'purple.10',
         backgroundColor: 'neutral.100',
         borderColor: 'separator.primary',
         _hover: {
@@ -43,17 +43,19 @@ const ContentSwitcherTheme = itemHelpers.defineMultiStyleConfig({
       _hover: {
         backgroundColor: 'neutral.93',
         borderColor: 'neutral.93',
+        color: 'neutral.10',
         _disabled: {
           backgroundColor: 'transparent',
           borderColor: 'transparent',
+          color: 'neutral.70',
         },
       },
       _disabled: {
         cursor: 'not-allowed',
-        color: 'neutral.60',
+        color: 'neutral.70',
       },
     },
   },
 });
 
-export default ContentSwitcherTheme;
+export default SegmentedControlTheme;

package/src/Components/{ContentSwitcher/ContentSwitcher.tsx → SegmentedControl/SegmentedControl.tsx}

@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
 import { useMultiStyleConfig, useRadioGroup, UseRadioGroupProps, forwardRef } from '@chakra-ui/react';
 import Box, { BoxProps } from '../Box/Box';
-import { ContentSwitcherContext, ContentSwitcherContextType } from './ContentSwitcher.context';
+import { SegmentedControlContext, SegmentedControlContextType } from './SegmentedControl.context';
 
-export type ContentSwitcherProps = BoxProps & UseRadioGroupProps;
+export type SegmentedControlProps = BoxProps & UseRadioGroupProps;
 
 /**
  * This is a custom radio button group, based on: https://chakra-ui.com/docs/components/radio/usage#custom-radio-buttons.
  */
-const ContentSwitcher = forwardRef<ContentSwitcherProps, 'div'>((props, ref) => {
+const SegmentedControl = forwardRef<SegmentedControlProps, 'div'>((props, ref) => {
   const { defaultValue, isDisabled, name, onChange, value, ...rest } = props;
 
   const { getRootProps, getRadioProps } = useRadioGroup({
@@ -19,7 +19,7 @@ const ContentSwitcher = forwardRef<ContentSwitcherProps, 'div'>((props, ref) =>
     value,
   });
 
-  const ctx = useMemo<ContentSwitcherContextType>(
+  const ctx = useMemo<SegmentedControlContextType>(
     () => ({
       getRadioProps,
       isGroupDisabled: isDisabled,
@@ -29,13 +29,13 @@ const ContentSwitcher = forwardRef<ContentSwitcherProps, 'div'>((props, ref) =>
 
   const group = getRootProps();
 
-  const theme = useMultiStyleConfig('ContentSwitcher');
+  const theme = useMultiStyleConfig('SegmentedControl');
 
   return (
-    <ContentSwitcherContext value={ctx}>
+    <SegmentedControlContext value={ctx}>
       <Box __css={theme.container} ref={ref} {...group} {...rest} />
-    </ContentSwitcherContext>
+    </SegmentedControlContext>
   );
 });
 
-export default ContentSwitcher;
+export default SegmentedControl;

package/src/Components/{ContentSwitcher/ContentSwitcherItem.tsx → SegmentedControl/SegmentedControlItem.tsx}

@@ -1,21 +1,21 @@
 import { useMultiStyleConfig, useRadio } from '@chakra-ui/react';
 import Box from '../Box/Box';
-import { useContentSwitcherContext } from './ContentSwitcher.context';
+import { useSegmentedControlContext } from './SegmentedControl.context';
 
-export interface ContentSwitcherItemProps {
+export interface SegmentedControlItemProps {
   children: string;
   isDisabled?: boolean;
   value: string;
 }
 
-const ContentSwitcherItem = (props: ContentSwitcherItemProps) => {
-  const { getRadioProps, isGroupDisabled } = useContentSwitcherContext();
+const SegmentedControlItem = (props: SegmentedControlItemProps) => {
+  const { getRadioProps, isGroupDisabled } = useSegmentedControlContext();
 
   const { children, isDisabled, value } = props;
 
   const { getInputProps, getCheckboxProps } = useRadio(getRadioProps({ value }));
 
-  const theme = useMultiStyleConfig('ContentSwitcher');
+  const theme = useMultiStyleConfig('SegmentedControl');
 
   const isItemDisabled = isGroupDisabled || isDisabled;
 
@@ -27,4 +27,4 @@ const ContentSwitcherItem = (props: ContentSwitcherItemProps) => {
   );
 };
 
-export default ContentSwitcherItem;
+export default SegmentedControlItem;

package/src/index.ts

@@ -267,11 +267,11 @@ export {
 export { default as SidebarItem } from './Components/Sidebar/SidebarItem';
 export { SidebarItemIcon, SidebarItemLabel, SidebarItemDateExtra } from './Components/Sidebar/SidebarItem';
 
-export type { ContentSwitcherProps } from './Components/ContentSwitcher/ContentSwitcher';
-export { default as ContentSwitcher } from './Components/ContentSwitcher/ContentSwitcher';
+export type { SegmentedControlProps } from './Components/SegmentedControl/SegmentedControl';
+export { default as SegmentedControl } from './Components/SegmentedControl/SegmentedControl';
 
-export type { ContentSwitcherItemProps } from './Components/ContentSwitcher/ContentSwitcherItem';
-export { default as ContentSwitcherItem } from './Components/ContentSwitcher/ContentSwitcherItem';
+export type { SegmentedControlItemProps } from './Components/SegmentedControl/SegmentedControlItem';
+export { default as SegmentedControlItem } from './Components/SegmentedControl/SegmentedControlItem';
 
 export type { DrawerProps } from './Components/Drawer/Drawer';
 export { default as Drawer } from './Components/Drawer/Drawer';

package/src/theme.ts

@@ -34,7 +34,7 @@ import ProgressBar from './Components/ProgressBar/ProgressBar.theme';
 import Slider from './Components/Slider/Slider.theme';
 import Sidebar from './Components/Sidebar/Sidebar.theme';
 import SidebarItem from './Components/Sidebar/SidebarItem.theme';
-import ContentSwitcher from './Components/ContentSwitcher/ContentSwitcher.theme';
+import SegmentedControl from './Components/SegmentedControl/SegmentedControl.theme';
 import Tag from './Components/Tag/Tag.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
@@ -117,7 +117,7 @@ const theme = {
     SidebarItem,
     Progress: ProgressBar,
     Slider,
-    ContentSwitcher,
+    SegmentedControl,
     Tag,
   },
 };