@ornikar/kitt-universal 5.0.0 → 6.0.0

package/dist/index-node-14.17.cjs.js

@@ -10,9 +10,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const Animated = require('react-native-reanimated');
 const twemojiParser = require('twemoji-parser');
 const WebBrowser = require('expo-web-browser');
+const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactIntl = require('react-intl');
 const react$1 = require('@linaria/react');
-const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const expoLinearGradient = require('expo-linear-gradient');
 const reactNative$1 = require('@floating-ui/react-native');
@@ -24,55 +24,22 @@ const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
 const DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
 
-function SpinningIcon({
-  children
-}) {
-  const animationRef = react.useRef(new reactNative.Animated.Value(0));
-  const rotation = animationRef.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg']
-  });
-  react.useEffect(() => {
-    if (process.env.TESTS) return undefined;
-    const animation = reactNative.Animated.loop(reactNative.Animated.timing(animationRef.current, {
-      toValue: 1,
-      duration: 1100,
-      easing: reactNative.Easing.linear,
-      useNativeDriver: true
-    }));
-    animation.start();
-    return () => {
-      if (process.env.TESTS) return undefined;
-      animation.stop();
-      return undefined;
-    };
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Animated.View, {
-    style: {
-      transform: [{
-        rotate: rotation
-      }]
-    },
-    children: children
-  });
-}
-
+const defaultIconSize = 20;
 const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
-  color
-}) => color, ({
-  size
-}) => size, ({
-  size
-}) => size, ({
-  align = 'auto'
-}) => align);
+  $color
+}) => $color, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size, ({
+  $align = 'auto'
+}) => $align);
 function Icon({
   icon,
-  size = 20,
-  spin,
+  size = defaultIconSize,
   align,
   color
 }) {
@@ -80,12 +47,10 @@ function Icon({
     color
   });
   return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
-    align: align,
-    size: size,
-    color: color,
-    children: spin ? /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
-      children: clonedIcon
-    }) : clonedIcon
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
   });
 }
 
@@ -631,7 +596,6 @@ const StyledIconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
 function ButtonIcon({
   icon,
   color,
-  spin,
   iconPosition,
   testID
 }) {
@@ -639,7 +603,6 @@ function ButtonIcon({
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
       icon: icon,
-      spin: spin,
       testID: testID,
       color: color
     })
@@ -654,7 +617,6 @@ function ButtonContentChildren({
   type,
   icon,
   iconPosition,
-  iconSpin,
   isDisabled,
   color,
   children
@@ -668,9 +630,8 @@ function ButtonContentChildren({
   const isWebSubtle = isSubtle(type) && reactNative.Platform.OS === 'web' && !isDisabled;
 
   if (!children) {
-    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-      spin: iconSpin // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ,
+    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    , {
       icon: icon,
       color: isWebSubtle ? 'inherit' : color
     });
@@ -678,7 +639,6 @@ function ButtonContentChildren({
 
   const buttonIconSharedProps = {
     type,
-    spin: iconSpin,
     iconPosition,
     color: isWebSubtle ? 'inherit' : color
   };
@@ -766,7 +726,6 @@ const Button = /*#__PURE__*/react.forwardRef(({
   large,
   icon,
   iconPosition = 'left',
-  iconSpin,
   testID,
   href,
   hrefAttrs,
@@ -794,7 +753,6 @@ const Button = /*#__PURE__*/react.forwardRef(({
         isDisabled: disabled,
         icon: icon,
         iconPosition: iconPosition,
-        iconSpin: iconSpin,
         children: children
       }), reactNative.Platform.OS !== 'web' && disabled ? /*#__PURE__*/jsxRuntime.jsx(StyledDisabled, {}) : null]
     })
@@ -974,9 +932,9 @@ const button = {
     }
   },
   contentPadding: {
-    default: '8px 16px 7px',
-    large: '12px 24px 11px',
-    disabled: '6px 14px 5px'
+    default: '7px 16px 7px',
+    large: '11px 24px 11px',
+    disabled: '5px 14px 5px'
   },
   transition: {
     duration: '200ms',
@@ -1484,7 +1442,7 @@ function useKittTheme() {
 const CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled__default.Pressable.withConfig({
   displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
   componentId: "kitt-universal__sc-1sav1n6-0"
-})(["display:flex;flex-direction:row;align-items:center;"]);
+})(["display:flex;flex-direction:row;"]);
 const CheckboxContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "kitt-universal__sc-1sav1n6-1"
@@ -1702,6 +1660,51 @@ function DatePickerInputs({
   });
 }
 
+function DatePickerAndroid({
+  onBlur,
+  onFocus,
+  pickerDefaultDate,
+  pickerUITestID,
+  setIsFocused,
+  currentValue,
+  setCurrentValue,
+  onChange,
+  isFocused,
+  ...props
+}) {
+  const handleClose = () => {
+    if (onBlur) onBlur();
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerInputs, {
+    handleModalOpen: () => {
+      setIsFocused(true);
+      if (onFocus) onFocus();
+      DateTimePicker.DateTimePickerAndroid.open({
+        testID: pickerUITestID,
+        value: currentValue || pickerDefaultDate || new Date(Date.now()),
+        onChange: e => {
+          setIsFocused(false);
+          const {
+            timestamp
+          } = e.nativeEvent;
+
+          if (timestamp) {
+            const date = new Date(timestamp);
+            setCurrentValue(date);
+            onChange(date);
+            handleClose();
+          }
+        },
+        onTouchCancel: handleClose
+      });
+    },
+    currentValue: currentValue,
+    isFocused: isFocused,
+    ...props
+  });
+}
+
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
 const OverlayPressable = /*#__PURE__*/styled__default(reactNative.Pressable).withConfig({
   displayName: "Overlay__OverlayPressable",
@@ -2247,6 +2250,20 @@ function DatePicker({
   const [isFocused, setIsFocused] = react.useState(false);
   const [currentValue, setCurrentValue] = react.useState(value);
 
+  if (reactNative.Platform.OS === 'android') {
+    return /*#__PURE__*/jsxRuntime.jsx(DatePickerAndroid, {
+      pickerDefaultDate: pickerDefaultDate,
+      pickerUITestID: pickerUITestID,
+      currentValue: currentValue,
+      setCurrentValue: setCurrentValue,
+      isFocused: isFocused,
+      setIsFocused: setIsFocused,
+      onChange: onChange,
+      onBlur: onBlur,
+      ...props
+    });
+  }
+
   const handleModalClose = () => {
     if (onBlur) onBlur();
     setIsPickerUIVisible(false);
@@ -2809,6 +2826,50 @@ function FullScreenModal({
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
+function SpinningIcon({
+  icon,
+  size = defaultIconSize,
+  align,
+  color
+}) {
+  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
+    color
+  });
+  const animationRef = react.useRef(new reactNative.Animated.Value(0));
+  const rotation = animationRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  react.useEffect(() => {
+    if (process.env.NODE_ENV === 'test') return undefined;
+    const animation = reactNative.Animated.loop(reactNative.Animated.timing(animationRef.current, {
+      toValue: 1,
+      duration: 1100,
+      easing: reactNative.Easing.linear,
+      useNativeDriver: true
+    }));
+    animation.start();
+    return () => {
+      if (process.env.NODE_ENV === 'test') return undefined;
+      animation.stop();
+      return undefined;
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
+    $align: align,
+    $size: size,
+    $color: color,
+    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.Animated.View, {
+      style: {
+        transform: [{
+          rotate: rotation
+        }]
+      },
+      children: clonedIcon
+    })
+  });
+}
+
 const ContentView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
@@ -2936,9 +2997,10 @@ function getActivityIndicatorSize(size) {
   return size < 36 ? 'small' : 'large';
 }
 
+const defaultLoaderSize = defaultIconSize;
 function Loader({
   color = 'primary',
-  size = 20
+  size = defaultLoaderSize
 }) {
   const theme = /*#__PURE__*/styled.useTheme();
   const colorHex = theme.kitt.typography.colors[color];
@@ -4055,6 +4117,39 @@ function TypographyLink({
   });
 }
 
+function TypographySpinningIconSpecifiedColor({
+  color,
+  ...props
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, { ...props,
+    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
+  });
+}
+
+function TypographySpinningIconInheritColor(props) {
+  const color = useTypographyColor();
+  return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIconSpecifiedColor, {
+    color: color,
+    ...props
+  });
+}
+
+function TypographySpinningIcon({
+  color,
+  ...props
+}) {
+  if (color) {
+    return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIconSpecifiedColor, {
+      color: color,
+      ...props
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIconInheritColor, { ...props
+  });
+}
+
 const hex2rgba = (hex, alpha = 1) => {
   const r = parseInt(hex.slice(1, 3), 16);
   const g = parseInt(hex.slice(3, 5), 16);
@@ -4129,6 +4224,7 @@ exports.Notification = Notification;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
 exports.Skeleton = Skeleton;
+exports.SpinningIcon = SpinningIcon;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;
@@ -4145,6 +4241,7 @@ exports.Typography = Typography;
 exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
+exports.TypographySpinningIcon = TypographySpinningIcon;
 exports.createWindowSizeHelper = createWindowSizeHelper;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;