@aic-kits/react-native 0.0.2 → 0.0.4

package/lib/components/LevelStep/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Canvas } from '@shopify/react-native-skia';
+import { isNil } from 'lodash';
+import { useCallback, useMemo } from 'react';
+import { Pressable } from 'react-native';
+import { runOnJS, useDerivedValue, useSharedValue, withDelay, withSpring, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../theme';
+import { HapticFeedback, HapticFeedbackTypes } from '../../utils';
+import { CircularProgress } from './CircularProgress';
+import { LEVEL_STEP_ASSETS } from './constants';
+import { TransformedSvg } from './TransformedSvg';
+export const LevelStep = (props) => {
+    const theme = useTheme();
+    const themeLevelStep = useMemo(() => theme.__hd__.levelStep, [theme]);
+    const themeTop = useMemo(() => themeLevelStep.top, [themeLevelStep]);
+    const themeBottom = useMemo(() => themeLevelStep.bottom, [themeLevelStep]);
+    const themeProgress = useMemo(() => themeLevelStep.progress, [themeLevelStep]);
+    const themeAnimation = useMemo(() => themeLevelStep.animation, [themeLevelStep]);
+    const { onPress, type = themeLevelStep.defaultType, progress } = props;
+    const assetInfo = useMemo(() => LEVEL_STEP_ASSETS[type], [type]);
+    const transformY = useSharedValue(0);
+    const progressSharedValue = useSharedValue(progress);
+    const topBox = useDerivedValue(() => ({
+        x: themeTop.x,
+        y: themeTop.y + transformY.value,
+        width: themeTop.width,
+        height: themeTop.height,
+    }));
+    const bottomBox = useDerivedValue(() => ({
+        x: themeBottom.x,
+        y: themeBottom.y + transformY.value,
+        width: themeBottom.width,
+        height: themeBottom.height - transformY.value,
+    }));
+    const handlePressIn = useCallback(() => {
+        transformY.value = withSpring(themeAnimation.button.transformY.max, {
+            mass: themeAnimation.button.springConfig.mass,
+        });
+        HapticFeedback.trigger(HapticFeedbackTypes.soft);
+    }, [
+        themeAnimation.button.springConfig.mass,
+        themeAnimation.button.transformY.max,
+        transformY,
+    ]);
+    const handlePressOut = useCallback(() => {
+        transformY.value = withSpring(themeAnimation.button.transformY.min, {
+            mass: themeAnimation.button.springConfig.mass,
+        });
+    }, [
+        themeAnimation.button.springConfig.mass,
+        themeAnimation.button.transformY.min,
+        transformY,
+    ]);
+    const handleNullableOnPress = useCallback((event) => {
+        if (!isNil(onPress)) {
+            onPress(event);
+        }
+    }, [onPress]);
+    const handlePress = useCallback((event) => {
+        if (type !== 'locked') {
+            progressSharedValue.value = withDelay(themeAnimation.progress.delay, withSpring(1, {
+                mass: themeAnimation.progress.springConfig.mass,
+            }, () => {
+                runOnJS(handleNullableOnPress)(event);
+                progressSharedValue.value = withDelay(themeAnimation.progress.postPressDelay, withTiming(progress));
+            }));
+        }
+    }, [
+        handleNullableOnPress,
+        progress,
+        progressSharedValue,
+        themeAnimation.progress.delay,
+        themeAnimation.progress.postPressDelay,
+        themeAnimation.progress.springConfig.mass,
+        type,
+    ]);
+    return (_jsx(Pressable, { onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, children: _jsxs(Canvas, { style: themeLevelStep.canvas, children: [_jsx(CircularProgress, { progress: progressSharedValue, width: themeLevelStep.circularProgress.width, height: themeLevelStep.circularProgress.height, backgroundColor: themeProgress.backgroundColor, foregroundColor: theme.colors[assetInfo.color], strokeWidth: themeProgress.strokeWidth, springMass: themeAnimation.button.springConfig.mass }), _jsx(TransformedSvg, { source: assetInfo.bottom, box: bottomBox }), _jsx(TransformedSvg, { source: assetInfo.top, box: topBox })] }) }));
+};

package/lib/components/LevelStep/types.d.ts

@@ -0,0 +1,7 @@
+import type { PressableProps } from 'react-native';
+import type { LevelStepType } from '../../theme';
+export interface LevelStepProps extends Pick<PressableProps, 'onPress'> {
+    type?: LevelStepType;
+    progress: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/LevelStep/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/LevelStep/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC;IAMrE,IAAI,CAAC,EAAE,aAAa,CAAC;IAKrB,QAAQ,EAAE,MAAM,CAAC;CAClB"}

package/lib/components/LevelStep/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/List/index.d.ts

@@ -0,0 +1,13 @@
+import { type ForwardedRef } from 'react';
+import { FlatList, type FlatListProps, type ListRenderItem } from 'react-native';
+import { type ScrollableProps } from '../Scrollable';
+export interface ListProps<T> extends Omit<ScrollableProps, 'children' | 'renderItem'>, Omit<FlatListProps<T>, 'children' | 'renderItem'> {
+    children?: ListRenderItem<T> | null | undefined;
+    renderItem?: ListRenderItem<T> | null | undefined;
+}
+declare function PlainList<T>({ style, contentContainerStyle, renderItem, children, ...otherProps }: ListProps<T>, ref: ForwardedRef<FlatList<T>>): import("react/jsx-runtime").JSX.Element;
+export declare const List: <T>(props: ListProps<T> & {
+    ref?: ForwardedRef<FlatList<T>>;
+}) => ReturnType<typeof PlainList>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAGjF,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAS,CAAC,CAAC,CAC1B,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,YAAY,CAAC,EACtD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAKnD,QAAQ,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAKjD,UAAU,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CAClD;AAED,iBAAS,SAAS,CAAC,CAAC,EAClB,EACE,KAAK,EACL,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,UAAU,EACd,EAAE,SAAS,CAAC,CAAC,CAAC,EACf,GAAG,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,2CAiB/B;AAED,eAAO,MAAM,IAAI,EAA4B,CAAC,CAAC,EAC7C,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KACtD,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC"}

package/lib/components/List/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { FlatList } from 'react-native';
+import { useTheme } from '../../theme';
+import { genScrollableContainerStyle, genScrollableContentContainerStyle, } from '../Scrollable';
+function PlainList({ style, contentContainerStyle, renderItem, children, ...otherProps }, ref) {
+    const theme = useTheme();
+    return (_jsx(FlatList, { ref: ref, renderItem: renderItem || children, style: [genScrollableContainerStyle(theme, otherProps), style], showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, contentContainerStyle: [
+            genScrollableContentContainerStyle(theme, otherProps),
+            contentContainerStyle,
+        ], ...otherProps }));
+}
+export const List = forwardRef(PlainList);

package/lib/components/Loading/Loading.d.ts

@@ -0,0 +1,3 @@
+import type { LoadingProps } from './types';
+export declare const LoadingComponent: ({ size, color, loading, }: LoadingProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Loading.d.ts.map

package/lib/components/Loading/Loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/Loading.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,gBAAgB,8BAI1B,YAAY,4CAkGd,CAAC"}

package/lib/components/Loading/Loading.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path, Skia } from '@shopify/react-native-skia';
+import { useEffect, useMemo } from 'react';
+import Animated, { Easing, useAnimatedStyle, useDerivedValue, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../theme';
+import { StyledCanvas } from './StyledLoading';
+export const LoadingComponent = ({ size, color = 'primary', loading = true, }) => {
+    const theme = useTheme();
+    const themeLoading = useMemo(() => theme.__hd__.loading, [theme.__hd__.loading]);
+    const strokeWidth = useMemo(() => themeLoading.strokeWidths[size], [size, themeLoading.strokeWidths]);
+    const diameter = useMemo(() => themeLoading.sizes[size], [size, themeLoading.sizes]);
+    const maxRadius = useMemo(() => diameter / 2 - strokeWidth, [diameter, strokeWidth]);
+    const scale = useSharedValue(loading ? 1 : 0);
+    const opacity = useSharedValue(loading ? 1 : 0);
+    const startAngle = useSharedValue(0);
+    const sweepAngle = useSharedValue(themeLoading.arc.minAngle);
+    useEffect(() => {
+        startAngle.value = withRepeat(withTiming(360, {
+            duration: themeLoading.animation.loopInterval,
+            easing: Easing.linear,
+        }), -1);
+        sweepAngle.value = withRepeat(withTiming(themeLoading.arc.maxAngle, {
+            duration: themeLoading.animation.loopInterval * 2,
+        }), -1, true);
+    }, [
+        sweepAngle,
+        startAngle,
+        themeLoading.animation.loopInterval,
+        themeLoading.arc.maxAngle,
+    ]);
+    useEffect(() => {
+        scale.value = withTiming(loading ? 1 : 0, {
+            duration: themeLoading.animation.showingDuration,
+        });
+        opacity.value = withTiming(loading ? 1 : 0, {
+            duration: themeLoading.animation.showingDuration,
+            easing: loading ? Easing.out(Easing.poly(8)) : Easing.poly(8),
+        });
+    }, [
+        maxRadius,
+        opacity,
+        scale,
+        diameter,
+        themeLoading.animation.showingDuration,
+        loading,
+    ]);
+    const pathValue = useDerivedValue(() => {
+        const path = Skia.Path.Make();
+        const cx = diameter / 2;
+        const cy = diameter / 2;
+        path.addArc({
+            x: cx - maxRadius,
+            y: cy - maxRadius,
+            width: maxRadius * 2,
+            height: maxRadius * 2,
+        }, startAngle.value, sweepAngle.value * scale.value);
+        return path;
+    });
+    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+    return (_jsx(Animated.View, { style: animatedStyle, children: _jsx(StyledCanvas, { size: diameter, children: _jsx(Path, { path: pathValue, antiAlias: true, style: "stroke", color: theme.colors[color], strokeWidth: strokeWidth, strokeCap: "round" }) }) }));
+};

package/lib/components/Loading/StyledLoading.d.ts

@@ -0,0 +1,14 @@
+export declare const StyledCanvas: import("@emotion/native").StyledComponent<import("@shopify/react-native-skia").CanvasProps & import("react").RefAttributes<import("@shopify/react-native-skia").SkiaDomView> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size: number;
+    opacity?: number;
+}, {}, {}>;
+export declare const StyledLoadingContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;
+//# sourceMappingURL=StyledLoading.d.ts.map

package/lib/components/Loading/StyledLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledLoading.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/StyledLoading.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;SAoBi5K,MAAO,WAAW;;UAnBp7K,MAAM;cACF,MAAM;UAOhB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;SASoyB,MAAO,WAAW;;;EADx1B,CAAC"}

package/lib/components/Loading/StyledLoading.js

@@ -0,0 +1,18 @@
+import styled from '@emotion/native';
+import { Canvas } from '@shopify/react-native-skia';
+export const StyledCanvas = styled(Canvas)(({ size, opacity }) => {
+    return {
+        width: size,
+        height: size,
+        opacity,
+    };
+});
+export const StyledLoadingContainer = styled.View `
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	justify-content: center;
+	align-items: center;
+`;

package/lib/components/Loading/index.d.ts

@@ -0,0 +1,3 @@
+import type { LoadingProps } from './types';
+export declare const Loading: ({ size, loading, color, children, testID, ...boxProps }: LoadingProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Loading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,4DAOjB,YAAY,4CA0Cd,CAAC"}

package/lib/components/Loading/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useTheme } from '../../theme';
+import { Box } from '../Box';
+import { LoadingComponent } from './Loading';
+import { StyledLoadingContainer } from './StyledLoading';
+export const Loading = ({ size, loading = true, color = 'primary', children, testID, ...boxProps }) => {
+    const theme = useTheme();
+    const opacity = useSharedValue(loading ? 0 : 1);
+    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+    useEffect(() => {
+        opacity.value = withTiming(loading ? 0 : 1, {
+            duration: theme.__hd__.loading.animation.contentShowingDuration,
+            easing: loading ? Easing.out(Easing.poly(8)) : Easing.poly(8),
+        });
+    }, [
+        loading,
+        opacity,
+        theme.__hd__.loading.animation.contentShowingDuration,
+    ]);
+    if (!children) {
+        return (_jsx(LoadingComponent, { size: size, color: color, loading: loading, testID: testID }));
+    }
+    return (_jsxs(Box, { ...boxProps, children: [_jsx(StyledLoadingContainer, { children: _jsx(LoadingComponent, { size: size, color: color, loading: loading, testID: testID }) }), _jsx(Animated.View, { style: animatedStyle, children: children })] }));
+};

package/lib/components/Loading/types.d.ts

@@ -0,0 +1,25 @@
+import type { Color, LoadingSize } from '../../theme';
+import type { BoxProps } from '../Box';
+export interface LoadingProps extends BoxProps {
+    /**
+     * Size of the view.
+     */
+    size: LoadingSize;
+    /**
+     * Loading state of the loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * Color of the loading indicator.
+     */
+    color?: Color;
+    /**
+     * Children of the loading indicator.
+     */
+    children?: React.ReactNode;
+    /**
+     * Test ID of the loading indicator.
+     */
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/Loading/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C;;OAEG;IACJ,IAAI,EAAE,WAAW,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACJ,KAAK,CAAC,EAAE,KAAK,CAAC;IAEb;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/components/Loading/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Notification/Notification.d.ts

@@ -0,0 +1,6 @@
+interface NotificationComponentProps {
+    topInset: number;
+}
+declare const NotificationComponent: ({ topInset }: NotificationComponentProps) => import("react/jsx-runtime").JSX.Element;
+export { NotificationComponent as Notification };
+//# sourceMappingURL=Notification.d.ts.map

package/lib/components/Notification/Notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAeA,UAAU,0BAA0B;IACnC,QAAQ,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,qBAAqB,iBAAkB,0BAA0B,4CAEtE,CAAC;AAEF,OAAO,EAAE,qBAAqB,IAAI,YAAY,EAAE,CAAC"}

package/lib/components/Notification/Notification.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Toast, {} from 'react-native-toast-message';
+import { Toast as ToastComponent } from './Toast';
+const notificationConfig = {
+    toastSuccess: ({ text1 }) => _jsx(ToastComponent, { type: "success", message: text1 || '' }),
+    toastError: ({ text1 }) => _jsx(ToastComponent, { type: "error", message: text1 || '' }),
+    toastInfo: ({ text1 }) => _jsx(ToastComponent, { type: "info", message: text1 || '' }),
+    toastWarning: ({ text1 }) => _jsx(ToastComponent, { type: "warning", message: text1 || '' }),
+};
+const NotificationComponent = ({ topInset }) => {
+    return _jsx(Toast, { config: notificationConfig, topOffset: topInset });
+};
+export { NotificationComponent as Notification };

package/lib/components/Notification/NotificationProvider.d.ts

@@ -0,0 +1,4 @@
+export declare const NotificationProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotificationProvider.d.ts.map

package/lib/components/Notification/NotificationProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationProvider.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,kBAE9B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAe/B,CAAC"}

package/lib/components/Notification/NotificationProvider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { NotificationContext } from './context';
+import { Notification } from './Notification';
+export const NotificationProvider = ({ children, }) => {
+    const [topInset, setTopInset] = useState(0);
+    const updateTopInset = useCallback((inset) => {
+        if (inset !== topInset) {
+            setTopInset(inset);
+        }
+    }, [topInset]);
+    return (_jsxs(NotificationContext.Provider, { value: { updateTopInset }, children: [children, _jsx(Notification, { topInset: topInset })] }));
+};

package/lib/components/Notification/Toast.d.ts

@@ -0,0 +1,8 @@
+import type { ToastType } from '../../theme';
+interface ToastProps {
+    type: ToastType;
+    message: string;
+}
+export declare const Toast: ({ type, message }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Toast.d.ts.map

package/lib/components/Notification/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Toast.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAS,SAAS,EAAE,MAAM,aAAa,CAAC;AAOpD,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAgBD,eAAO,MAAM,KAAK,sBAAuB,UAAU,4CAkDlD,CAAC"}

package/lib/components/Notification/Toast.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/native';
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useTheme } from '../../theme';
+import { ColorUtils } from '../../utils';
+import { Box } from '../Box';
+import { Card } from '../Card';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+const StyledBackground = styled.View `
+  background-color: ${({ theme, color, opacity }) => ColorUtils.convertHexToRGBA(theme.colors[color], opacity)};
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+`;
+const StyledText = styled(Text) `
+  max-width: ${({ maxWidth }) => maxWidth}px;
+`;
+export const Toast = ({ type, message }) => {
+    const theme = useTheme();
+    const themeToast = useMemo(() => theme.__hd__.notification.toast, [theme]);
+    const toastConfig = useMemo(() => themeToast.configs[type], [type, themeToast]);
+    const { width: screenWidth } = useWindowDimensions();
+    const textMaxWidth = screenWidth * themeToast.maxWidthScale
+        - 2 * theme.spaces[themeToast.paddingHorizontal]
+        - theme.spaces[themeToast.gap]
+        - theme.spaces[themeToast.iconSize];
+    return (_jsx(Card, { marginTop: themeToast.marginTop, borderRadius: themeToast.borderRadius, overflow: "hidden", children: _jsxs(Box, { flexDirection: "row", alignItems: "center", justifyContent: "flex-start", gap: themeToast.gap, paddingHorizontal: themeToast.paddingHorizontal, paddingVertical: themeToast.paddingVertical, children: [_jsx(StyledBackground, { color: toastConfig.color, opacity: themeToast.backgroundColorOpacity }), _jsx(Icon, { icon: toastConfig.icon, color: toastConfig.color, size: themeToast.iconSize }), _jsx(StyledText, { maxWidth: textMaxWidth, color: toastConfig.color, fontSize: themeToast.fontSize, fontWeight: themeToast.fontWeight, children: message })] }) }));
+};

package/lib/components/Notification/context.d.ts

@@ -0,0 +1,7 @@
+type NotificationContextType = {
+    updateTopInset: (inset: number) => void;
+};
+export declare const NotificationContext: import("react").Context<NotificationContextType | null>;
+export declare const useNotificationContext: () => NotificationContextType;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/lib/components/Notification/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/context.ts"],"names":[],"mappings":"AAEA,KAAK,uBAAuB,GAAG;IAC7B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,yDACoB,CAAC;AAErD,eAAO,MAAM,sBAAsB,+BAMlC,CAAC"}

package/lib/components/Notification/context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const NotificationContext = createContext(null);
+export const useNotificationContext = () => {
+    const context = useContext(NotificationContext);
+    if (!context) {
+        throw new Error('useNotificationContext must be used within a NotificationProvider');
+    }
+    return context;
+};

package/lib/components/Notification/index.d.ts

@@ -0,0 +1,3 @@
+export { NotificationProvider } from './NotificationProvider';
+export { useNotificationContext } from './context';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Notification/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/Notification/index.js

@@ -0,0 +1,2 @@
+export { NotificationProvider } from './NotificationProvider';
+export { useNotificationContext } from './context';

package/lib/components/PlaySwitch/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PlaySwitchProps } from './types';
+export declare const PlaySwitch: React.FC<PlaySwitchProps>;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/PlaySwitch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PlaySwitch/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAazE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+FhD,CAAC"}

package/lib/components/PlaySwitch/index.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isNumber } from 'lodash/fp';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../theme';
+import { Art } from '../Art';
+import { Touchable } from '../Touchable';
+export const PlaySwitch = props => {
+    const theme = useTheme();
+    const themePlaySwitch = useMemo(() => theme.__hd__.playSwitch, [theme.__hd__.playSwitch]);
+    const { size = themePlaySwitch.defaultSize, color = themePlaySwitch.defaultColor, status = themePlaySwitch.defaultStatus, onChange, ...boxProps } = props;
+    const [currentStatus, setCurrentStatus] = useState(status);
+    const playOpacity = useSharedValue(currentStatus === 'play' ? 1 : 0);
+    const playAngle = useSharedValue(currentStatus === 'play' ? 0 : 90);
+    const pauseOpacity = useSharedValue(currentStatus === 'pause' ? 1 : 1);
+    const pauseAngle = useSharedValue(currentStatus === 'pause' ? 0 : -90);
+    const handleStatusChange = useCallback(() => {
+        const newStatus = currentStatus === 'play' ? 'pause' : 'play';
+        setCurrentStatus(newStatus);
+        if (onChange) {
+            onChange(newStatus);
+        }
+    }, [currentStatus, onChange]);
+    const playArt = useMemo(() => require('../../assets/png/play.png'), []);
+    const pauseArt = useMemo(() => require('../../assets/png/pause.png'), []);
+    const sizeValue = useMemo(() => (isNumber(size) ? size : theme.sizes[size]), [size, theme.sizes]);
+    useEffect(() => {
+        playOpacity.value = withTiming(currentStatus === 'play' ? 1 : 0, {
+            duration: themePlaySwitch.animation.showingDuration,
+            easing: Easing.out(Easing.poly(8)),
+        });
+        playAngle.value = withTiming(currentStatus === 'play' ? 0 : 90, {
+            duration: themePlaySwitch.animation.showingDuration,
+            easing: Easing.out(Easing.poly(8)),
+        });
+        pauseOpacity.value = withTiming(currentStatus === 'pause' ? 1 : 0, {
+            duration: themePlaySwitch.animation.showingDuration,
+            easing: Easing.out(Easing.poly(8)),
+        });
+        pauseAngle.value = withTiming(currentStatus === 'pause' ? 0 : -90, {
+            duration: themePlaySwitch.animation.showingDuration,
+            easing: Easing.out(Easing.poly(8)),
+        });
+    }, [
+        playOpacity,
+        themePlaySwitch.animation.showingDuration,
+        currentStatus,
+        pauseOpacity,
+        playAngle,
+        pauseAngle,
+    ]);
+    const playAnimatedStyle = useAnimatedStyle(() => ({
+        opacity: playOpacity.value,
+        transform: [{ rotate: `${playAngle.value}deg` }],
+    }));
+    const pauseAnimatedStyle = useAnimatedStyle(() => ({
+        opacity: pauseOpacity.value,
+        transform: [{ rotate: `${pauseAngle.value}deg` }],
+    }));
+    return (_jsxs(Touchable, { width: sizeValue, height: sizeValue, alignItems: "center", justifyContent: "center", onPress: handleStatusChange, ...boxProps, children: [_jsx(Animated.View, { style: playAnimatedStyle, children: _jsx(Art, { art: playArt, type: "image", color: color, size: size }) }), _jsx(Animated.View, { style: [pauseAnimatedStyle, StyleSheet.absoluteFill], children: _jsx(Art, { art: pauseArt, type: "image", color: color, size: size }) })] }));
+};

package/lib/components/PlaySwitch/types.d.ts

@@ -0,0 +1,23 @@
+import type { Color, PlaySwitchStatus, Size } from '../../theme';
+import type { BorderWidthsPropsKeyType, BoxProps, CustomBoxPropsKeyType, RadiiPropsKeyType, SpacePropsKeyType } from '../Box';
+export interface PlaySwitchProps extends Pick<BoxProps, SpacePropsKeyType | RadiiPropsKeyType | BorderWidthsPropsKeyType | CustomBoxPropsKeyType> {
+    /**
+     * Size of the PlaySwitch, if width and height are the same.
+     */
+    size?: Size | number | undefined;
+    /**
+     * Color of the PlaySwitch. Default is 'white'.
+     *
+     * @default 'white'
+     */
+    color?: Color | undefined;
+    /**
+     * Status of the PlaySwitch.
+     */
+    status?: PlaySwitchStatus;
+    /**
+     * Callback when the PlaySwitch status changes.
+     */
+    onChange?: (status: PlaySwitchStatus) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/PlaySwitch/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PlaySwitch/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,KAAK,EACV,wBAAwB,EACxB,QAAQ,EACR,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,QAAQ,CAAC;AAEhB,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,QAAQ,EACN,iBAAiB,GACjB,iBAAiB,GACjB,wBAAwB,GACxB,qBAAqB,CACxB;IACD;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IAEjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAE1B;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C"}

package/lib/components/PlaySwitch/types.js

@@ -0,0 +1 @@
+export {};