@bitrise/bitkit 12.7.0 → 12.8.0

package/package.json

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

package/src/Components/Slider/Slider.theme.ts

@@ -0,0 +1,70 @@
+import { defineStyle, createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers([
+  'container',
+  'track',
+  'thumb',
+  'filledTrack',
+]);
+
+const baseStyleContainer = defineStyle(() => ({
+  width: '100%',
+  display: 'inline-block',
+  position: 'relative',
+  cursor: 'pointer',
+  _disabled: {
+    opacity: 0.6,
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+}));
+
+const baseStyleTrack = defineStyle(() => ({
+  height: '8',
+  overflow: 'hidden',
+  backgroundColor: 'neutral.95',
+  borderRadius: '4',
+}));
+
+const baseStyleThumb = defineStyle(() => ({
+  top: '50%',
+  transform: `translateY(-50%)`,
+  _active: {
+    transform: 'translateY(-50%) scale(1.15)',
+  },
+  width: '40px',
+  height: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'absolute',
+  outline: 0,
+  zIndex: 1,
+  borderRadius: '4',
+  bg: 'neutral.100',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  color: 'neutral.90',
+  transitionProperty: 'transform',
+  _focusVisible: {
+    boxShadow: 'outline',
+  },
+}));
+
+const baseStyleFilledTrack = defineStyle(() => ({
+  width: 'inherit',
+  height: 'inherit',
+  borderRadius: 'inherit',
+  backgroundColor: 'purple.40',
+}));
+
+const baseStyle = definePartsStyle(() => ({
+  container: baseStyleContainer(),
+  track: baseStyleTrack(),
+  thumb: baseStyleThumb(),
+  filledTrack: baseStyleFilledTrack(),
+}));
+
+const SliderTheme = defineMultiStyleConfig({ baseStyle });
+
+export default SliderTheme;

package/src/Components/Slider/Slider.tsx

@@ -0,0 +1,4 @@
+import { Slider, SliderProps } from '@chakra-ui/react';
+
+export type { SliderProps };
+export default Slider;

package/src/Components/Slider/SliderFilledTrack.tsx

@@ -0,0 +1,4 @@
+import { SliderFilledTrack, SliderInnerTrackProps } from '@chakra-ui/react';
+
+export type { SliderInnerTrackProps };
+export default SliderFilledTrack;

package/src/Components/Slider/SliderMark.tsx

@@ -0,0 +1,4 @@
+import { SliderMark, SliderMarkProps } from '@chakra-ui/react';
+
+export type { SliderMarkProps };
+export default SliderMark;

package/src/Components/Slider/SliderThumb.tsx

@@ -0,0 +1,12 @@
+import { SliderThumb as ChakraThumb, SliderThumbProps } from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
+
+export type { SliderThumbProps };
+
+const SliderThumb = ({ children, ...restProps }: SliderThumbProps) => {
+  return (
+    <ChakraThumb {...restProps}>{children || <Icon name="MenuHamburger" transform="rotate(90deg)" />}</ChakraThumb>
+  );
+};
+
+export default SliderThumb;

package/src/Components/Slider/SliderTrack.tsx

@@ -0,0 +1,4 @@
+import { SliderTrack, SliderTrackProps } from '@chakra-ui/react';
+
+export type { SliderTrackProps };
+export default SliderTrack;

package/src/index.ts

@@ -244,6 +244,20 @@ export { default as SearchInput } from './Components/SearchInput/SearchInput';
 export type { CloseButtonProps } from './Components/CloseButton/CloseButton';
 export { default as CloseButton } from './Components/CloseButton/CloseButton';
 
+export type { SliderProps } from './Components/Slider/Slider';
+export { default as Slider } from './Components/Slider/Slider';
+
+export type { SliderTrackProps } from './Components/Slider/SliderTrack';
+export { default as SliderTrack } from './Components/Slider/SliderTrack';
+
+export type { SliderInnerTrackProps } from './Components/Slider/SliderFilledTrack';
+export { default as SliderFilledTrack } from './Components/Slider/SliderFilledTrack';
+
+export type { SliderThumbProps } from './Components/Slider/SliderThumb';
+export { default as SliderThumb } from './Components/Slider/SliderThumb';
+
+export type { SliderMarkProps } from './Components/Slider/SliderMark';
+export { default as SliderMark } from './Components/Slider/SliderMark';
 export type { SidebarProps } from './Components/Sidebar/Sidebar';
 export { default as Sidebar } from './Components/Sidebar/Sidebar';
 export {

package/src/theme.ts

@@ -30,6 +30,7 @@ import DatePickerDay from './Components/DatePicker/DatePickerDay.theme';
 import NumberInput from './Components/NumberInput/NumberInput.theme';
 import Skeleton from './Components/Skeleton/Skeleton.theme';
 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';
 
@@ -111,6 +112,7 @@ const theme = {
     Sidebar,
     SidebarItem,
     Progress: ProgressBar,
+    Slider,
   },
 };