@ornikar/kitt-universal 5.0.2 → 6.0.0

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

@@ -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',
@@ -2868,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"
@@ -2995,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];
@@ -4114,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);
@@ -4188,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;
@@ -4204,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;