@fountain-ui/core 2.0.0-beta.9 → 2.0.0-beta.90

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,5 +1,15 @@
-import React from 'react';
-import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
+import { useCallback, useRef } from 'react';
+import {
+    Falsy,
+    Keyboard,
+    Platform,
+    RegisteredStyle,
+    ScrollViewProps,
+    StyleSheet,
+    ViewProps,
+    ViewStyle,
+} from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
 import {
     runOnJS,
     useAnimatedScrollHandler,
@@ -9,8 +19,8 @@ import {
     withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '@fountain-ui/styles';
 import { useHeight } from '../internal/hooks';
-import useElevationStyle from './useElevationStyle';
 import useAppbarStyles from './useAppbarStyles';
 
 type WebOnlyStyle = { boxShadow: any };
@@ -30,6 +40,8 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
+    dividerExposureMode?: 'always' | 'overlapped';
+    supportsReverseScroll?: boolean;
 }
 
 export interface CollapsibleAppBar {
@@ -43,14 +55,18 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
+    dividerExposureMode: 'overlapped',
+    supportsReverseScroll: true,
 };
 
-const ANIMATION_DURATION_MILLIS = 100;
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };
+const TRANSPARENT = '#FFFFFF00';
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
+const dismissKeyboard = () => Keyboard.dismiss();
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { keyboardDismissMode }: Required<Options> = {
+    const { keyboardDismissMode, dividerExposureMode, supportsReverseScroll }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -62,32 +78,32 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const [appBarHeight, onAppBarLayout] = useHeight();
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
 
     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 theme = useTheme();
+
     const animatedStyle = 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 indexRef = React.useRef<number>(0);
-    const offsetsRef = React.useRef<Array<number>>([]);
-
-    const onScrollViewChanged = (nextIndex: number) => {
+        const transform = [{ translateY: translateY.value }];
+
+        return {
+            transform,
+            borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+        };
+    }, [
+        theme,
+        dividerExposureMode,
+    ]);
+
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
+
+    const onScrollViewChanged = useCallback((nextIndex: number) => {
         const prevIndex = indexRef.current;
         if (prevIndex === nextIndex) {
             return;
@@ -105,16 +121,14 @@ 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 = withTiming(0, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(0, ANIMATION_CONFIG);
         }
-    };
+    }, [appBarHeight]);
 
     const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                runOnJS(Keyboard.dismiss)();
+                runOnJS(dismissKeyboard)();
             }
             lastTranslateY.value = translateY.value;
         },
@@ -124,7 +138,6 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
         onScroll: (event) => {
             const offsetY = event.contentOffset.y;
 
-            const ty = translateY.value;
             const maxTy = maxTranslateY.value;
 
             if (SUPPORTS_DRAG_DETECTION) {
@@ -134,19 +147,25 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
                 overlapped.value = offsetY + translateY.value > 0;
             } else {
-                if (offsetY > -maxTy) {
-                    if (ty === 0) {
-                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
-                    }
-                } else {
-                    if (ty === maxTy) {
-                        translateY.value = withTiming(0, {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
-                    }
-                }
+                const minOffsetY = -maxTy;
+                const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;
+
+                const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);
+                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);
+                const dy = safeOffsetY - safeLastOffsetY;
+
+                const newTranslateY = supportsReverseScroll
+                    ? dy === 0
+                        ? lastTranslateY.value
+                        : dy > 0
+                            ? maxTy
+                            : 0
+                    : safeLastOffsetY === minOffsetY
+                        ? 0
+                        : maxTy;
+
+                translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);
+                lastTranslateY.value = newTranslateY;
 
                 overlapped.value = offsetY > 0;
 
@@ -175,11 +194,9 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = withTiming(nextTranslateY, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    });
+    }, [keyboardDismissMode, appBarHeight]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 

package/src/hooks/useDebounce.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export default function useDebounce(callback: (args?: any) => void, debounceMillis: number) {
+    const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        return () => {
+            debounceTimeout.current && clearTimeout(debounceTimeout.current);
+        };
+    }, []);
+
+    return useCallback((...args: any[]) => {
+        if (debounceTimeout.current) {
+            clearTimeout(debounceTimeout.current);
+        }
+
+        if (callback) {
+            debounceTimeout.current = setTimeout(() => {
+                callback(...args);
+            }, debounceMillis);
+        }
+    }, [debounceMillis, callback]);
+}

package/src/hooks/useFadeInAppBar.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
+import { useMemo } from 'react';
+import { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, StyleSheet, ViewProps, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -26,6 +26,7 @@ export interface FadeInAppBar {
     titleStyle: ViewStyleProp;
     onAppBarLayout: OnLayoutCallback;
     onScroll: OnScroll;
+    scrollY: SharedValue<number>;
     dy: SharedValue<number>;
     normalized: SharedValue<number>;
 }
@@ -37,7 +38,7 @@ const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
 };
 
-const shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;
+const dismissKeyboard = () => Keyboard.dismiss();
 
 export default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {
     const {
@@ -58,7 +59,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
 
     const [appBarHeight, onAppBarLayout] = useHeight();
 
-    const [fromOffsetY, toOffsetY] = React.useMemo(() => {
+    const [fromOffsetY, toOffsetY] = useMemo(() => {
         const endY = typeof fadeInEndY === 'function'
             ? fadeInEndY(appBarHeight)
             : fadeInEndY;
@@ -70,34 +71,38 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         return [beginY, endY];
     }, [fadeInBeginY, fadeInBeginY, appBarHeight]);
 
+    const scrollY = 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 originalBackgroundColor = theme.palette.background.default;
+    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);
 
-    const animatedAppBarStyle = 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(() => {
+        const [r, g, b] = rgbValues;
+        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
+
+        return {
+            backgroundColor,
+            borderColor: theme.palette.divider,
+            borderBottomWidth: normalized.value >= 1 ? StyleSheet.hairlineWidth : 0,
+        };
+    }, [rgbValues]);
 
     const animatedTitleStyle = useAnimatedStyle(() => ({
         opacity: normalized.value,
-    }));
+    }), []);
 
     const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                runOnJS(Keyboard.dismiss)();
+                runOnJS(dismissKeyboard)();
             }
         },
         onScroll: (event) => {
             const offsetY = event.contentOffset.y;
+            scrollY.value = offsetY;
 
             const distance = Math.max(toOffsetY - fromOffsetY, 1);
             const localOffsetY = offsetY - fromOffsetY;
@@ -112,7 +117,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         onMomentumEnd: (event) => {
             lastOffsetY.value = event.contentOffset.y;
         },
-    });
+    }, [keyboardDismissMode]);
 
     const appBarStyle = [
         animatedAppBarStyle,
@@ -125,6 +130,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         titleStyle: [animatedTitleStyle],
         onAppBarLayout,
         onScroll: scrollHandler,
+        scrollY,
         dy,
         normalized,
     };

package/src/hooks/useImperativeState.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+
+export interface ImperativeState<T> {
+    hasChanged: () => boolean;
+    get: () => T;
+    set: (nextState: T) => void;
+}
+
+export default function useImperativeState<T>(initialValue: T): ImperativeState<T> {
+    return useMemo<ImperativeState<T>>(() => {
+        let prevState: T = initialValue;
+        let currentState: T = initialValue;
+
+        return {
+            hasChanged: () => prevState !== currentState,
+            get: () => currentState,
+            set: (nextState) => {
+                prevState = currentState;
+                currentState = nextState;
+            },
+        };
+    }, []);
+};

package/src/hooks/useSyncAnimatedValue.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react';
+import type { SyncAnimatedValue } from '../types';
+import useAnimatedValue from './useAnimatedValue';
+
+export interface SyncAnimatedValueConfig {
+    initialValue: number;
+    shouldSyncAlways?: boolean;
+}
+
+export default function useSyncAnimatedValue(config: SyncAnimatedValueConfig): SyncAnimatedValue {
+    const {
+        initialValue: maybeInitialValue,
+        shouldSyncAlways = false,
+    } = config;
+
+    const initialValue = Number.isFinite(maybeInitialValue) ? maybeInitialValue : 0;
+    const animatedValue = useAnimatedValue(initialValue);
+
+    const valueRef = useRef<number>(initialValue);
+
+    useEffect(() => {
+        const maybeId = shouldSyncAlways ? animatedValue.addListener((newValue) => {
+            valueRef.current = newValue.value;
+        }) : undefined;
+
+        return () => {
+            if (maybeId != null) {
+                animatedValue.removeListener(maybeId);
+            }
+        };
+    }, [shouldSyncAlways]);
+
+    return {
+        animatedValue,
+        initialValue,
+        getCurrentValue: () => valueRef.current,
+    };
+};

package/src/hooks/useThrottle.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useRef } from 'react';
 
 export interface ThrottleOptions {
     periodMillis: number;
@@ -8,9 +8,9 @@ export interface ThrottleOptions {
 export default function useThrottle(options: ThrottleOptions) {
     const { periodMillis, callback } = options;
 
-    const lastExecMillisRef = React.useRef(0);
+    const lastExecMillisRef = useRef(0);
 
-    return React.useCallback((...args: any[]) => {
+    return useCallback((...args: any[]) => {
         const now = Date.now();
         const millisAfterExecuted = now - lastExecMillisRef.current;
         lastExecMillisRef.current = now;

package/src/hooks/useValidWindowDimensions/index.ios.ts

@@ -1,15 +1,21 @@
-import { useState, useEffect } from 'react';
-import { useWindowDimensions } from 'react-native';
+import { useEffect, useState } from 'react';
+import type { ScaledSize } from 'react-native';
+import { Dimensions } from 'react-native';
 
-export default function useValidWindowDimensions() {
-    const window = useWindowDimensions();
-    const [validWindow, setValidWindow] = useState(window);
+export default function useValidWindowDimensions(): ScaledSize {
+    const [window, setWindow] = useState<ScaledSize>(() => Dimensions.get('window'));
 
     useEffect(() => {
-        if (window.width !== 0 && window.height !== 0) {
-            setValidWindow(window);
-        }
-    }, [window]);
+        const subscription = Dimensions.addEventListener('change', (newDimension) => {
+            const { window: newWindow } = newDimension;
 
-    return validWindow;
+            if (newWindow.width !== 0 && newWindow.height !== 0) {
+                setWindow(newWindow);
+            }
+        });
+
+        return subscription.remove;
+    }, []);
+
+    return window;
 }

package/src/index.ts

@@ -6,6 +6,8 @@ export * from './hooks';
 
 export * from './utils';
 
+export * from './store';
+
 export { default as Accordion } from './Accordion';
 export * from './Accordion';
 
@@ -78,6 +80,8 @@ export * from './IconButton';
 export { default as Image } from './Image';
 export * from './Image';
 
+export * from './ImageCore';
+
 export { default as Link } from './Link';
 export * from './Link';
 

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,12 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
-import { useWorkletCallback } from 'react-native-reanimated';
+import { useCallback, useState } from 'react';
+import { LayoutChangeEvent, ViewProps } from 'react-native';
 
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
-    const [height, setHeight] = React.useState<number>(initialHeight);
+    const [height, setHeight] = useState<number>(initialHeight);
 
-    const onLayout = useWorkletCallback((e) => {
+    const onLayout = useCallback((e: LayoutChangeEvent) => {
         setHeight(e.nativeEvent.layout.height);
     }, []);
 

package/src/internal/icons/Checkbox.tsx

@@ -4,7 +4,7 @@ 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"
+        d="M17 5C18.1046 5 19 5.89543 19 7V17C19 18.1046 18.1046 19 17 19H7C5.89543 19 5 18.1046 5 17V7C5 5.89543 5.89543 5 7 5H17ZM7 3C4.79086 3 3 4.79086 3 7V17C3 19.2091 4.79086 21 7 21H17C19.2091 21 21 19.2091 21 17V7C21 4.79086 19.2091 3 17 3H7Z"
     />,
     'Checkbox',
 );

package/src/internal/icons/CheckboxChecked.tsx

@@ -4,7 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <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"
+        d="M7 3C4.79086 3 3 4.79086 3 7V17C3 19.2091 4.79086 21 7 21H17C19.2091 21 21 19.2091 21 17V7C21 4.79086 19.2091 3 17 3H7ZM17.7071 9.20711L10.7071 16.2071C10.3166 16.5976 9.68342 16.5976 9.29289 16.2071L6.29289 13.2071C5.90237 12.8166 5.90237 12.1834 6.29289 11.7929C6.68342 11.4024 7.31658 11.4024 7.70711 11.7929L10 14.0858L16.2929 7.79289C16.6834 7.40237 17.3166 7.40237 17.7071 7.79289C18.0976 8.18342 18.0976 8.81658 17.7071 9.20711Z"
     />,
     'CheckboxChecked',
 );

package/src/internal/icons/ChevronDown.tsx

@@ -4,7 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        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"
+        d="M12 16.4141L5.29289 9.70696C4.90237 9.31643 4.90237 8.68327 5.29289 8.29274C5.68342 7.90222 6.31658 7.90222 6.70711 8.29274L12 13.5856L17.2929 8.29274C17.6834 7.90222 18.3166 7.90222 18.7071 8.29274C19.0976 8.68327 19.0976 9.31643 18.7071 9.70696L12 16.4141Z"
     />,
     'ChevronDown',
 );

package/src/internal/icons/ChevronLeft.tsx

@@ -4,7 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        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"
+        d="M7.58594 12L14.293 18.7071C14.6836 19.0976 15.3167 19.0976 15.7073 18.7071C16.0978 18.3166 16.0978 17.6834 15.7073 17.2929L10.4144 12L15.7073 6.70711C16.0978 6.31658 16.0978 5.68342 15.7073 5.29289C15.3167 4.90237 14.6836 4.90237 14.293 5.29289L7.58594 12Z"
     />,
     'ChevronLeft',
 );

package/src/internal/icons/ChevronRight.tsx

@@ -4,7 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M13.3303 10.5303L7.83032 16.0303L6.76966 14.9697L11.7393 10L6.76966 5.03033L7.83032 3.96968L13.3303 9.46967V10.5303Z"
+        d="M16.4141 12L9.70696 18.7071C9.31643 19.0976 8.68327 19.0976 8.29274 18.7071C7.90222 18.3166 7.90222 17.6834 8.29274 17.2929L13.5856 12L8.29274 6.70711C7.90222 6.31658 7.90222 5.68342 8.29274 5.29289C8.68327 4.90237 9.31643 4.90237 9.70696 5.29289L16.4141 12Z"
     />,
     'ChevronRight',
 );

package/src/internal/icons/Close.tsx

@@ -4,7 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        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"
+        d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29292C5.31658 3.9024 4.68342 3.9024 4.29289 4.29292C3.90237 4.68345 3.90237 5.31661 4.29289 5.70714L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0977 19.3166 20.0977 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z"
     />,
     'Close',
 );

package/src/internal/icons/Radio.tsx

@@ -4,7 +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"
+        d="M12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
     />,
     'Radio',
 );

package/src/internal/icons/RadioChecked.tsx

@@ -4,7 +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"
+        d="M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z"
     />,
     'RadioChecked',
 );

package/src/store/MockStore.ts

@@ -0,0 +1,21 @@
+import { MonoStore, StoreSubscription, DispatchAction } from './types';
+
+export default class MockStore<S> implements MonoStore<S> {
+
+    dispatch(action: DispatchAction<S>): void {
+        // do nothing
+    }
+
+    getState(): S {
+        throw new Error('stub!');
+    }
+
+    removeAllListeners(): void {
+        // do nothing
+    }
+
+    subscribe(listener: (state: S) => void): StoreSubscription {
+        return () => void 0;
+    }
+
+};

package/src/store/SimpleStore.ts

@@ -0,0 +1,50 @@
+import type { DispatchAction, MonoStore, StoreSubscription } from './types';
+
+function refEqual(a: any, b: any): boolean {
+    return a === b;
+}
+
+export default class SimpleStore<S> implements MonoStore<S> {
+
+    private state: S;
+
+    private listeners: Array<(state: S) => void> = [];
+
+    constructor(initialState: S) {
+        this.state = initialState;
+    }
+
+    dispatch(action: DispatchAction<S>): void {
+        // @ts-ignore
+        const nextState = typeof action === 'function' ? action(this.state) : action;
+
+        // Do not dispatch if state ref is equal
+        if (refEqual(this.state, nextState)) {
+            return;
+        }
+
+        this.state = nextState;
+        for (const id in this.listeners) {
+            const listener = this.listeners[id];
+            listener?.(nextState);
+        }
+    }
+
+    getState(): S {
+        return this.state;
+    }
+
+    subscribe(listener: (state: S) => void): StoreSubscription {
+        this.listeners.push(listener);
+
+        return () => {
+            const index = this.listeners.indexOf(listener);
+            this.listeners.splice(index, 1);
+        };
+    }
+
+    removeAllListeners(): void {
+        this.listeners.splice(0, this.listeners.length);
+    }
+
+};

package/src/store/index.ts

@@ -0,0 +1,3 @@
+export { default as SimpleStore } from './SimpleStore';
+export { default as MockStore } from './MockStore';
+export type { MonoStore, DispatchAction } from './types';