@fountain-ui/core 1.19.1 → 2.0.0-beta.11

package/src/Tooltip/Tooltip.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Text, View, ViewProps } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { rgb } from '@fountain-ui/utils';
 import { createFontStyle, css, useTheme } from '../styles';
 import { Close as CloseIcon } from '../internal/icons';
@@ -11,7 +12,7 @@ import UpArrow from './UpArrow';
 const defaultOpacity = 0.8;
 const initialLayout = { width: 0, height: 0, x: 0, y: 0 };
 
-const animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };
+const animationTimingConfig: WithTimingConfig = { duration: 150 };
 
 export default function Tooltip(props: TooltipProps) {
     const {
@@ -31,9 +32,9 @@ export default function Tooltip(props: TooltipProps) {
 
     const [layout, setLayout] = React.useState(initialLayout);
 
-    const scale = Animated.useSharedValue(0);
+    const scale = useSharedValue(0);
 
-    const tooltipAnimatedStyle = Animated.useAnimatedStyle(() => ({
+    const tooltipAnimatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
     }));
 
@@ -55,7 +56,7 @@ export default function Tooltip(props: TooltipProps) {
     React.useEffect(() => {
         const nextValue = visible ? 1 : 0;
 
-        scale.value = Animated.withTiming(nextValue, animationTimingConfig);
+        scale.value = withTiming(nextValue, animationTimingConfig);
     }, [visible]);
 
     const touchableStyle: ViewProps['style'] = {

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,6 +1,13 @@
 import React from 'react';
 import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import {
+    runOnJS,
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useHeight } from '../internal/hooks';
 import useElevationStyle from './useElevationStyle';
@@ -23,7 +30,6 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
-    translucent?: boolean;
 }
 
 export interface CollapsibleAppBar {
@@ -37,7 +43,6 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
-    translucent: false,
 };
 
 const ANIMATION_DURATION_MILLIS = 100;
@@ -45,7 +50,7 @@ const ANIMATION_DURATION_MILLIS = 100;
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { translucent, keyboardDismissMode }: Required<Options> = {
+    const { keyboardDismissMode }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -57,26 +62,37 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const [appBarHeight, onAppBarLayout] = useHeight();
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);
 
-    const translateY = Animated.useSharedValue<number>(0);
-    const lastTranslateY = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const overlapped = Animated.useSharedValue<boolean>(false);
+    const translateY = useSharedValue<number>(0);
+    const lastTranslateY = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const overlapped = useSharedValue<boolean>(false);
 
     const elevationStyle = useElevationStyle(4);
-    const animatedStyle = Animated.useAnimatedStyle(() => {
-        return Platform.OS === 'web' ? ({
-            transform: [{ translateY: translateY.value }],
-            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
-        }) : ({
-            transform: [{ translateY: translateY.value }],
-            elevation: overlapped.value ? elevationStyle?.elevation : 0,
-            shadowColor: elevationStyle?.shadowColor,
-            shadowOffset: elevationStyle?.shadowOffset,
-            shadowRadius: elevationStyle?.shadowRadius,
-            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
-        });
+    const animatedStyle = useAnimatedStyle(() => {
+        if (Platform.OS === 'web') {
+            return {
+                transform: [{ translateY: translateY.value }],
+                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                transform: [{ translateY: translateY.value }],
+                elevation: overlapped.value ? elevationStyle?.elevation : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                transform: [{ translateY: translateY.value }],
+                shadowColor: elevationStyle?.shadowColor,
+                shadowOffset: elevationStyle?.shadowOffset,
+                shadowRadius: elevationStyle?.shadowRadius,
+                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
+            };
+        }
+        return {};
     });
 
     const indexRef = React.useRef<number>(0);
@@ -100,16 +116,16 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = Animated.withTiming(0, {
+            translateY.value = withTiming(0, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
         }
     };
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                Animated.runOnJS(Keyboard.dismiss)();
+                runOnJS(Keyboard.dismiss)();
             }
             lastTranslateY.value = translateY.value;
         },
@@ -131,13 +147,13 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
             } else {
                 if (offsetY > -maxTy) {
                     if (ty === 0) {
-                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
+                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
                 } else {
                     if (ty === maxTy) {
-                        translateY.value = Animated.withTiming(0, {
+                        translateY.value = withTiming(0, {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
@@ -170,7 +186,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = Animated.withTiming(nextTranslateY, {
+            translateY.value = withTiming(nextTranslateY, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
@@ -180,7 +196,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
     const appBarStyle = [
         animatedStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         hasCollapsible ? styles.floating : undefined,
     ];
 

package/src/hooks/useFadeInAppBar.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { rgb } from '@fountain-ui/utils';
 import { useHeight } from '../internal/hooks';
+import { useTheme } from '../styles';
 import useAppbarStyles from './useAppbarStyles';
 
 type ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;
@@ -13,12 +15,10 @@ type OnScroll = ScrollViewProps['onScroll'];
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export interface Options {
-    backgroundColor?: string;
     fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);
     fadeInEndY?: number | ((appBarHeight: number) => number);
     floating?: boolean;
     keyboardDismissMode?: 'none' | 'on-drag';
-    translucent?: boolean;
 }
 
 export interface FadeInAppBar {
@@ -26,34 +26,32 @@ export interface FadeInAppBar {
     titleStyle: ViewStyleProp;
     onAppBarLayout: OnLayoutCallback;
     onScroll: OnScroll;
-    dy: Animated.SharedValue<number>;
-    normalized: Animated.SharedValue<number>;
+    dy: SharedValue<number>;
+    normalized: SharedValue<number>;
 }
 
 const defaultOptions: Required<Options> = {
-    backgroundColor: '#ffffff',
     fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
     fadeInEndY: (appBarHeight) => appBarHeight,
     floating: true,
     keyboardDismissMode: 'none',
-    translucent: false,
 };
 
 const shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;
 
 export default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {
     const {
-        backgroundColor,
         fadeInBeginY,
         fadeInEndY,
         floating,
         keyboardDismissMode,
-        translucent,
     }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
 
+    const theme = useTheme();
+
     const styles = useAppbarStyles();
 
     const safeAreaInsets = useSafeAreaInsets();
@@ -72,29 +70,45 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         return [beginY, endY];
     }, [fadeInBeginY, fadeInBeginY, appBarHeight]);
 
-    const dy = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const normalized = Animated.useSharedValue<number>(0);
+    const dy = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const normalized = useSharedValue<number>(0);
 
+    const backgroundColor = theme.palette.background.default;
     const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
 
-    const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
-        elevation: normalized.value >= 1 ? 6 : 0,
-        shadowColor: '#000',
-        shadowOffset,
-        shadowRadius: 4.65,
-        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,
-    }));
+    const animatedAppBarStyle = useAnimatedStyle(() => {
+        if (Platform.OS === 'web') {
+            return {
+                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+                elevation: normalized.value >= 1 ? 6 : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+                shadowColor: '#000',
+                shadowOffset,
+                shadowRadius: 4.65,
+                shadowOpacity: normalized.value >= 1 ? 0.25 : 0,
+            };
+        }
+        return {};
+    });
 
-    const animatedTitleStyle = Animated.useAnimatedStyle(() => ({
+    const animatedTitleStyle = useAnimatedStyle(() => ({
         opacity: normalized.value,
     }));
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                Animated.runOnJS(Keyboard.dismiss)();
+                runOnJS(Keyboard.dismiss)();
             }
         },
         onScroll: (event) => {
@@ -117,7 +131,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
 
     const appBarStyle = [
         animatedAppBarStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         floating ? styles.floating : undefined,
     ];
 

package/src/hooks/useThrottle.ts

@@ -10,7 +10,7 @@ export default function useThrottle(options: ThrottleOptions) {
 
     const lastExecMillisRef = React.useRef(0);
 
-    return React.useCallback((...args) => {
+    return React.useCallback((...args: any[]) => {
         const now = Date.now();
         const millisAfterExecuted = now - lastExecMillisRef.current;
         lastExecMillisRef.current = now;

package/src/internal/hooks/index.ts

@@ -1,2 +1 @@
 export { default as useHeight } from './useHeight';
-export { default as useWidth } from './useWidth';

package/src/internal/hooks/useHeight.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useWorkletCallback } from 'react-native-reanimated';
 
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
     const [height, setHeight] = React.useState<number>(initialHeight);
 
-    const onLayout = Animated.useWorkletCallback((e) => {
+    const onLayout = useWorkletCallback((e) => {
         setHeight(e.nativeEvent.layout.height);
     }, []);
 

package/src/internal/icons/Checkbox.tsx

@@ -5,6 +5,6 @@ import { createSvgIcon } from '../../utils';
 export default createSvgIcon(
     <Path
         d="M13 4.5C14.3807 4.5 15.5 5.61929 15.5 7V13C15.5 14.3807 14.3807 15.5 13 15.5H7C5.61929 15.5 4.5 14.3807 4.5 13V7C4.5 5.61929 5.61929 4.5 7 4.5H13ZM7 3C4.79086 3 3 4.79086 3 7V13C3 15.2091 4.79086 17 7 17H13C15.2091 17 17 15.2091 17 13V7C17 4.79086 15.2091 3 13 3H7Z"
-        fill="#767676"
-    />
-    , 'Checkbox');
+    />,
+    'Checkbox',
+);

package/src/internal/icons/CheckboxChecked.tsx

@@ -3,14 +3,8 @@ import { Path } from 'react-native-svg';
 import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
-    <React.Fragment>
-        <Path
-            d="M3 7C3 4.79086 4.79086 3 7 3H13C15.2091 3 17 4.79086 17 7V13C17 15.2091 15.2091 17 13 17H7C4.79086 17 3 15.2091 3 13V7Z"
-            fill="#242424"
-        />
-        <Path
-            d="M14.8303 7.53033L8.32856 14.0321L4.96967 10.6732L6.03033 9.61252L8.32856 11.9108L13.7697 6.46967L14.8303 7.53033Z"
-            fill="#FFFFFF"
-        />
-    </React.Fragment>
-    , 'CheckboxChecked');
+    <Path
+        d="M7 3C4.79086 3 3 4.79086 3 7V13C3 15.2091 4.79086 17 7 17H13C15.2091 17 17 15.2091 17 13V7C17 4.79086 15.2091 3 13 3H7ZM8.8589 13.5018L8.32857 14.0321L7.79824 13.5018L4.96967 10.6732L6.03033 9.61252L8.32857 11.9108L13.7697 6.46967L14.8303 7.53033L8.8589 13.5018Z"
+    />,
+    'CheckboxChecked',
+);

package/src/internal/icons/ChevronDown.tsx

@@ -4,8 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
         d="M9.51967 13.2803L4.01967 7.78033L5.08033 6.71967L10.05 11.6893L15.0197 6.71967L16.0803 7.78033L10.5803 13.2803L9.51967 13.2803Z"
-    />
-    , 'ChevronDown');
+    />,
+    'ChevronDown',
+);

package/src/internal/icons/ChevronLeft.tsx

@@ -4,8 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
         d="M6.76965 9.46973L12.2697 3.96973L13.3303 5.03039L8.36064 10.0001L13.3303 14.9697L12.2697 16.0304L6.76965 10.5304L6.76965 9.46973Z"
-    />
-    , 'ChevronLeft');
+    />,
+    'ChevronLeft',
+);

package/src/internal/icons/ChevronRight.tsx

@@ -4,8 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
         d="M13.3303 10.5303L7.83032 16.0303L6.76966 14.9697L11.7393 10L6.76966 5.03033L7.83032 3.96968L13.3303 9.46967V10.5303Z"
-    />
-    , 'ChevronRight');
+    />,
+    'ChevronRight',
+);

package/src/internal/icons/Close.tsx

@@ -4,8 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
         d="M3.96968 14.9697L5.03034 16.0303L10 11.0607L14.9697 16.0303L16.0303 14.9697L11.0607 10L16.0303 5.03033L14.9697 3.96967L10 8.93934L5.03034 3.96968L3.96968 5.03033L8.93935 10L3.96968 14.9697Z"
-    />
-    , 'Close');
+    />,
+    'Close',
+);

package/src/internal/icons/Radio.tsx

@@ -4,5 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M10 16.5C6.41015 16.5 3.5 13.5899 3.5 10C3.5 6.41015 6.41015 3.5 10 3.5C13.5899 3.5 16.5 6.41015 16.5 10C16.5 13.5899 13.5899 16.5 10 16.5ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z"/>
-    , 'Radio');
+        d="M10 16.5C6.41015 16.5 3.5 13.5899 3.5 10C3.5 6.41015 6.41015 3.5 10 3.5C13.5899 3.5 16.5 6.41015 16.5 10C16.5 13.5899 13.5899 16.5 10 16.5ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z"
+    />,
+    'Radio',
+);

package/src/internal/icons/RadioChecked.tsx

@@ -4,5 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M16.5 10C16.5 6.41015 13.5899 3.5 10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 15C7.23858 15 5 12.7614 5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15Z"/>
-    , 'RadioChecked');
+        d="M16.5 10C16.5 6.41015 13.5899 3.5 10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 15C7.23858 15 5 12.7614 5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15Z"
+    />,
+    'RadioChecked',
+);

package/src/styles/index.ts

@@ -1,4 +1,3 @@
-export { default as cloneSvgIcon } from './cloneSvgIcon';
 export { default as createFontStyle } from './createFontStyle';
 export { default as EdgeInsets } from './EdgeInsets';
 export type { EdgeInsetsType } from './EdgeInsets';

package/src/types/index.ts

@@ -13,3 +13,10 @@ export interface BaseProps extends Readonly<{
 }> {}
 
 export type { Theme } from '@fountain-ui/styles';
+
+export type CommonComponentColor =
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'warning'
+    | 'accent';

package/src/utils/cloneElementSafely.ts

@@ -0,0 +1,9 @@
+import { cloneElement, ReactElement } from 'react';
+
+type FalsyReactElement = ReactElement | null | undefined;
+
+export default function cloneElementSafely(element: FalsyReactElement, props?: any): FalsyReactElement {
+    return element
+        ? cloneElement(element, { ...props, ...element?.props })
+        : null;
+};

package/src/utils/index.ts

@@ -1 +1,2 @@
+export { default as cloneElementSafely } from './cloneElementSafely';
 export { default as createSvgIcon } from './createSvgIcon';

package/build/commonjs/internal/hooks/useWidth.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useWidth;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactNative = require("react-native");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function useWidth() {
-  const window = (0, _reactNative.useWindowDimensions)();
-
-  const [width, setWidth] = _react.default.useState(window.width);
-
-  const onLayout = _react.default.useCallback(e => {
-    const newWidth = e.nativeEvent.layout.width;
-
-    if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {
-      setWidth(newWidth);
-    }
-  }, []);
-
-  return [width, onLayout];
-}
-//# sourceMappingURL=useWidth.js.map

package/build/commonjs/internal/hooks/useWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useWidth.ts"],"names":["useWidth","window","width","setWidth","React","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,QAAT,GAAqD;AAChE,QAAMC,MAAM,GAAG,uCAAf;;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,eAAMC,QAAN,CAAeJ,MAAM,CAACC,KAAtB,CAA1B;;AAEA,QAAMI,QAAQ,GAAGF,eAAMG,WAAN,CAAmBC,CAAD,IAA0B;AACzD,UAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBT,KAAtC;;AAEA,QAAIO,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWX,KAAX,CAA7C,EAAgE;AAC5DC,MAAAA,QAAQ,CAACM,QAAD,CAAR;AACH;AACJ,GANgB,EAMd,EANc,CAAjB;;AAQA,SAAO,CAACP,KAAD,EAAQI,QAAR,CAAP;AACH","sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';\n\nexport default function useWidth(): [number, ViewProps['onLayout']] {\n    const window = useWindowDimensions();\n    const [width, setWidth] = React.useState(window.width);\n\n    const onLayout = React.useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {\n            setWidth(newWidth);\n        }\n    }, []);\n\n    return [width, onLayout];\n}"]}

package/build/commonjs/styles/cloneSvgIcon.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = cloneSvgIcon;
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const sizeMap = {
-  'tiny': 16,
-  'small': 20,
-  'medium': 24,
-  'large': 28
-};
-
-function cloneSvgIcon(icon, config) {
-  const size = sizeMap[config.size];
-  const fill = config.color;
-
-  if (icon) {
-    return /*#__PURE__*/_react.default.cloneElement(icon, {
-      width: size,
-      height: size,
-      fill,
-      style: config.style,
-      ...icon.props
-    });
-  }
-
-  return null;
-}
-
-;
-//# sourceMappingURL=cloneSvgIcon.js.map

package/build/commonjs/styles/cloneSvgIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["cloneSvgIcon.ts"],"names":["sizeMap","cloneSvgIcon","icon","config","size","fill","color","React","cloneElement","width","height","style","props"],"mappings":";;;;;;;AAAA;;;;AAgBA,MAAMA,OAAqB,GAAG;AAC1B,UAAS,EADiB;AAE1B,WAAS,EAFiB;AAG1B,YAAU,EAHgB;AAI1B,WAAS;AAJiB,CAA9B;;AAOe,SAASC,YAAT,CAAsBC,IAAtB,EAA+CC,MAA/C,EAAsF;AACjG,QAAMC,IAAI,GAAGJ,OAAO,CAACG,MAAM,CAACC,IAAR,CAApB;AACA,QAAMC,IAAI,GAAGF,MAAM,CAACG,KAApB;;AAEA,MAAIJ,IAAJ,EAAU;AACN,wBAAOK,eAAMC,YAAN,CAAmBN,IAAnB,EAAyB;AAC5BO,MAAAA,KAAK,EAAEL,IADqB;AAE5BM,MAAAA,MAAM,EAAEN,IAFoB;AAG5BC,MAAAA,IAH4B;AAI5BM,MAAAA,KAAK,EAAER,MAAM,CAACQ,KAJc;AAK5B,SAAGT,IAAI,CAACU;AALoB,KAAzB,CAAP;AAOH;;AAED,SAAO,IAAP;AACH;;AAAA","sourcesContent":["import React from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { SvgIconProps } from '../SvgIcon';\n\ntype FalsyReactElement = React.ReactElement | null | undefined;\n\ntype NamedSize = 'small' | 'medium' | 'large' | 'tiny';\n\ntype NamedSizeMap = { [n in NamedSize]: number };\n\ninterface IconConfig {\n    size: NamedSize;\n    color?: SvgIconProps['color'];\n    style?: StyleProp<ViewStyle>;\n}\n\nconst sizeMap: NamedSizeMap = {\n    'tiny' : 16,\n    'small': 20,\n    'medium': 24,\n    'large': 28,\n};\n\nexport default function cloneSvgIcon(icon: FalsyReactElement, config: IconConfig): FalsyReactElement {\n    const size = sizeMap[config.size];\n    const fill = config.color;\n\n    if (icon) {\n        return React.cloneElement(icon, {\n            width: size,\n            height: size,\n            fill,\n            style: config.style,\n            ...icon.props,\n        });\n    }\n\n    return null;\n};"]}

package/build/module/internal/hooks/useWidth.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-export default function useWidth() {
-  const window = useWindowDimensions();
-  const [width, setWidth] = React.useState(window.width);
-  const onLayout = React.useCallback(e => {
-    const newWidth = e.nativeEvent.layout.width;
-
-    if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {
-      setWidth(newWidth);
-    }
-  }, []);
-  return [width, onLayout];
-}
-//# sourceMappingURL=useWidth.js.map

package/build/module/internal/hooks/useWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useWidth.ts"],"names":["React","useWindowDimensions","useWidth","window","width","setWidth","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAA4BC,mBAA5B,QAAkE,cAAlE;AAEA,eAAe,SAASC,QAAT,GAAqD;AAChE,QAAMC,MAAM,GAAGF,mBAAmB,EAAlC;AACA,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBL,KAAK,CAACM,QAAN,CAAeH,MAAM,CAACC,KAAtB,CAA1B;AAEA,QAAMG,QAAQ,GAAGP,KAAK,CAACQ,WAAN,CAAmBC,CAAD,IAA0B;AACzD,UAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBR,KAAtC;;AAEA,QAAIM,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWV,KAAX,CAA7C,EAAgE;AAC5DC,MAAAA,QAAQ,CAACK,QAAD,CAAR;AACH;AACJ,GANgB,EAMd,EANc,CAAjB;AAQA,SAAO,CAACN,KAAD,EAAQG,QAAR,CAAP;AACH","sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';\n\nexport default function useWidth(): [number, ViewProps['onLayout']] {\n    const window = useWindowDimensions();\n    const [width, setWidth] = React.useState(window.width);\n\n    const onLayout = React.useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {\n            setWidth(newWidth);\n        }\n    }, []);\n\n    return [width, onLayout];\n}"]}

package/build/module/styles/cloneSvgIcon.js

@@ -1,25 +0,0 @@
-import React from 'react';
-const sizeMap = {
-  'tiny': 16,
-  'small': 20,
-  'medium': 24,
-  'large': 28
-};
-export default function cloneSvgIcon(icon, config) {
-  const size = sizeMap[config.size];
-  const fill = config.color;
-
-  if (icon) {
-    return /*#__PURE__*/React.cloneElement(icon, {
-      width: size,
-      height: size,
-      fill,
-      style: config.style,
-      ...icon.props
-    });
-  }
-
-  return null;
-}
-;
-//# sourceMappingURL=cloneSvgIcon.js.map

package/build/module/styles/cloneSvgIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["cloneSvgIcon.ts"],"names":["React","sizeMap","cloneSvgIcon","icon","config","size","fill","color","cloneElement","width","height","style","props"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAgBA,MAAMC,OAAqB,GAAG;AAC1B,UAAS,EADiB;AAE1B,WAAS,EAFiB;AAG1B,YAAU,EAHgB;AAI1B,WAAS;AAJiB,CAA9B;AAOA,eAAe,SAASC,YAAT,CAAsBC,IAAtB,EAA+CC,MAA/C,EAAsF;AACjG,QAAMC,IAAI,GAAGJ,OAAO,CAACG,MAAM,CAACC,IAAR,CAApB;AACA,QAAMC,IAAI,GAAGF,MAAM,CAACG,KAApB;;AAEA,MAAIJ,IAAJ,EAAU;AACN,wBAAOH,KAAK,CAACQ,YAAN,CAAmBL,IAAnB,EAAyB;AAC5BM,MAAAA,KAAK,EAAEJ,IADqB;AAE5BK,MAAAA,MAAM,EAAEL,IAFoB;AAG5BC,MAAAA,IAH4B;AAI5BK,MAAAA,KAAK,EAAEP,MAAM,CAACO,KAJc;AAK5B,SAAGR,IAAI,CAACS;AALoB,KAAzB,CAAP;AAOH;;AAED,SAAO,IAAP;AACH;AAAA","sourcesContent":["import React from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { SvgIconProps } from '../SvgIcon';\n\ntype FalsyReactElement = React.ReactElement | null | undefined;\n\ntype NamedSize = 'small' | 'medium' | 'large' | 'tiny';\n\ntype NamedSizeMap = { [n in NamedSize]: number };\n\ninterface IconConfig {\n    size: NamedSize;\n    color?: SvgIconProps['color'];\n    style?: StyleProp<ViewStyle>;\n}\n\nconst sizeMap: NamedSizeMap = {\n    'tiny' : 16,\n    'small': 20,\n    'medium': 24,\n    'large': 28,\n};\n\nexport default function cloneSvgIcon(icon: FalsyReactElement, config: IconConfig): FalsyReactElement {\n    const size = sizeMap[config.size];\n    const fill = config.color;\n\n    if (icon) {\n        return React.cloneElement(icon, {\n            width: size,\n            height: size,\n            fill,\n            style: config.style,\n            ...icon.props,\n        });\n    }\n\n    return null;\n};"]}

package/build/typescript/internal/hooks/useWidth.d.ts

@@ -1,2 +0,0 @@
-import { ViewProps } from 'react-native';
-export default function useWidth(): [number, ViewProps['onLayout']];

package/build/typescript/styles/cloneSvgIcon.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { SvgIconProps } from '../SvgIcon';
-declare type FalsyReactElement = React.ReactElement | null | undefined;
-declare type NamedSize = 'small' | 'medium' | 'large' | 'tiny';
-interface IconConfig {
-    size: NamedSize;
-    color?: SvgIconProps['color'];
-    style?: StyleProp<ViewStyle>;
-}
-export default function cloneSvgIcon(icon: FalsyReactElement, config: IconConfig): FalsyReactElement;
-export {};