@ornikar/kitt-universal 31.0.2-canary.e53cdb7e12a8aa3be6ae21c546ec9bcaca9b660c.0 → 31.1.0

package/dist/index.es.js

@@ -7,7 +7,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
-import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withTiming, Easing as Easing$1, runOnJS, useDerivedValue, useAnimatedProps, withDelay, withRepeat, interpolate } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withTiming, Easing as Easing$1, runOnJS, useDerivedValue, useAnimatedProps, withDelay, withRepeat, interpolate, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
 import { Platform, Animated as Animated$1, Easing, StyleSheet, Modal, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, Keyboard, Text as Text$1, useWindowDimensions, PixelRatio } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import _typeof from '@babel/runtime/helpers/typeof';
@@ -31,6 +31,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useFloating, offset, autoPlacement } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
+import isChromatic from 'chromatic/isChromatic';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 
 var View = View$1;
@@ -179,6 +180,102 @@ var colors = {
   overlay: {
     dark: deepPurpleColorPalette['grey-alpha.50'],
     light: deepPurpleColorPalette['white-alpha.80']
+  },
+  // Bumper semantic tokens
+  // Should be kept in sync with the light theme in bumper
+  // https://github.com/ornikar/kitt/blob/79e367e962c957c016c4df67dbcf515c8f45ff0e/@ornikar/bumper/src/themes/light.ts#L6
+  bumper: {
+    content: {
+      base: {
+        hi: deepPurpleColorPalette['grey.9'],
+        mid: deepPurpleColorPalette['grey.7'],
+        low: deepPurpleColorPalette['grey.5'],
+        onContrasted: {
+          hi: deepPurpleColorPalette['grey.0'],
+          mid: deepPurpleColorPalette['white-alpha.80'],
+          low: deepPurpleColorPalette['white-alpha.60']
+        }
+      },
+      accent: deepPurpleColorPalette['deepPurple.8'],
+      promo: deepPurpleColorPalette['lightning.9'],
+      info: deepPurpleColorPalette['blue.7'],
+      success: deepPurpleColorPalette['green.7'],
+      warning: deepPurpleColorPalette['yellow.7'],
+      danger: deepPurpleColorPalette['red.7'],
+      muted: deepPurpleColorPalette['beige.6'],
+      disabled: deepPurpleColorPalette['grey.3']
+    },
+    bg: {
+      base: {
+        hi: {
+          "default": deepPurpleColorPalette['beige.2'],
+          pressed: deepPurpleColorPalette['beige.3']
+        },
+        mid: {
+          "default": deepPurpleColorPalette['beige.1'],
+          pressed: deepPurpleColorPalette['beige.2']
+        },
+        low: {
+          "default": deepPurpleColorPalette['grey.0'],
+          pressed: deepPurpleColorPalette['beige.1']
+        }
+      },
+      accent: {
+        "default": deepPurpleColorPalette['deepPurple.8'],
+        pressed: deepPurpleColorPalette['deepPurple.7']
+      },
+      promo: {
+        hi: {
+          "default": deepPurpleColorPalette['lightning.9'],
+          pressed: deepPurpleColorPalette['lightning.8']
+        },
+        mid: {
+          "default": deepPurpleColorPalette['lightning.5'],
+          pressed: deepPurpleColorPalette['lightning.4']
+        }
+      },
+      highlight: {
+        "default": deepPurpleColorPalette['blue.1'],
+        pressed: deepPurpleColorPalette['blue.2']
+      },
+      info: {
+        hi: deepPurpleColorPalette['blue.6'],
+        mid: deepPurpleColorPalette['blue.1']
+      },
+      success: {
+        hi: deepPurpleColorPalette['green.6'],
+        mid: deepPurpleColorPalette['green.1']
+      },
+      warning: {
+        hi: deepPurpleColorPalette['yellow.6'],
+        mid: deepPurpleColorPalette['yellow.1']
+      },
+      danger: {
+        hi: deepPurpleColorPalette['red.6'],
+        mid: deepPurpleColorPalette['red.1']
+      },
+      disabled: {
+        hi: deepPurpleColorPalette['grey.3'],
+        mid: deepPurpleColorPalette['grey.1']
+      },
+      overlay: deepPurpleColorPalette['grey-alpha.50']
+    },
+    border: {
+      base: {
+        hi: deepPurpleColorPalette['grey.9'],
+        mid: deepPurpleColorPalette['beige.3'],
+        onContrasted: {
+          hi: deepPurpleColorPalette['grey.0'],
+          mid: deepPurpleColorPalette['white-alpha.20']
+        }
+      },
+      accent: deepPurpleColorPalette['deepPurple.8'],
+      info: deepPurpleColorPalette['blue.6'],
+      success: deepPurpleColorPalette['green.6'],
+      warning: deepPurpleColorPalette['yellow.6'],
+      danger: deepPurpleColorPalette['red.6'],
+      disabled: deepPurpleColorPalette['grey.2']
+    }
   }
 };
 
@@ -11833,8 +11930,7 @@ function NavigationBottomSheet(_ref) {
     snapPoints = _ref.snapPoints,
     maxDynamicContentSize = _ref.maxDynamicContentSize,
     isVisible = _ref.isVisible,
-    _ref$isExpanded = _ref.isExpanded,
-    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    isExpanded = _ref.isExpanded,
     onClose = _ref.onClose;
   var bottomSheetRef = useBottomSheet();
   useEffect(function () {
@@ -11847,8 +11943,7 @@ function NavigationBottomSheet(_ref) {
     }
   }, [bottomSheetRef, isVisible]);
   useEffect(function () {
-    if (!isVisible) return;
-    if (isExpanded) {
+    if (isVisible && isExpanded) {
       var _bottomSheetRef$curre3;
       (_bottomSheetRef$curre3 = bottomSheetRef.current) === null || _bottomSheetRef$curre3 === void 0 || _bottomSheetRef$curre3.expand();
     } else {
@@ -14127,6 +14222,18 @@ var TypographyLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
+var ChromaticReducedMotionDecorator = makeDecorator({
+  name: 'ChromaticReducedMotionDecorator',
+  parameterName: 'chromaticReducedMotion',
+  wrapper: function (storyFn, context) {
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [isChromatic() ? /*#__PURE__*/jsx(ReducedMotionConfig, {
+        mode: ReduceMotion.Always
+      }) : null, storyFn(context)]
+    });
+  }
+});
+
 function KittThemeProvider(_ref) {
   var isSSR = _ref.isSSR,
     children = _ref.children,
@@ -14481,5 +14588,5 @@ function VerticalSteps(_ref) {
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationBottomSheet, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Sticker, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, TopNavBar, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, ChromaticReducedMotionDecorator, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationBottomSheet, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Sticker, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, TopNavBar, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index.es.js.map