@aic-kits/react-native 0.0.2 → 0.0.4

package/lib/components/Sectional/utils.d.ts

@@ -0,0 +1,11 @@
+import type { ViewToken } from '@shopify/flash-list';
+import type { SectionListData } from 'react-native';
+import type { FlashListItem } from './types';
+export declare const convertSectionsToFlashListItems: <T, S>(sections: SectionListData<T, S>[]) => FlashListItem<T, S>[];
+export declare const getItemType: <T, S>(item: FlashListItem<T, S>) => "row" | "sectionHeader";
+export declare const getStickyHeaderIndices: <T, S>(items: FlashListItem<T, S>[]) => number[];
+export declare const isSectionChanged: <T, S>({ viewableItems, changed, }: {
+    viewableItems: ViewToken[];
+    changed: ViewToken[];
+}) => boolean;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/Sectional/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Sectional/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,+BAA+B,GAAI,CAAC,EAAE,CAAC,YACxC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAChC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,EASrB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,CAAC,QAAQ,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,KAAG,KAAK,GAAG,eACd,CAAC;AAEzD,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAE,CAAC,SAAS,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAGhD,MAAM,EAC9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,CAAC,+BAGlC;IACD,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,OAAO,EAAE,SAAS,EAAE,CAAC;CACrB,YAoCD,CAAC"}

package/lib/components/Sectional/utils.js

@@ -0,0 +1,37 @@
+import { first, get, isNumber } from 'lodash';
+export const convertSectionsToFlashListItems = (sections) => {
+    return [
+        { type: 'headerSeparator' },
+        ...sections.flatMap((section) => [
+            { type: 'sectionHeader', section },
+            ...section.data.map((item, index) => ({ type: 'row', item, section, index })),
+        ]),
+        { type: 'footerSeparator' },
+    ];
+};
+export const getItemType = (item) => item.type === 'sectionHeader' ? 'sectionHeader' : 'row';
+export const getStickyHeaderIndices = (items) => {
+    return items
+        .map((item, index) => (item.type === 'sectionHeader' ? index : null))
+        .filter(isNumber);
+};
+export const isSectionChanged = ({ viewableItems, changed, }) => {
+    const firstViewableItem = first(viewableItems);
+    if (!firstViewableItem) {
+        return false;
+    }
+    const firstViewableItemIndex = firstViewableItem.index;
+    if (!isNumber(firstViewableItemIndex)) {
+        return false;
+    }
+    const firstViewableItemContent = firstViewableItem.item;
+    const secondViewableItem = get(viewableItems, 1);
+    const secondViewableItemContent = secondViewableItem?.item;
+    const isASectionHeaderGoingUp = firstViewableItemContent?.type === 'sectionHeader' &&
+        changed.some((item) => item.index === firstViewableItemIndex - 1 && !item.isViewable);
+    const isASectionHeaderGoingDown = viewableItems.length > 2 &&
+        secondViewableItemContent?.type === 'sectionHeader' &&
+        changed.some((item) => item.index === firstViewableItemIndex &&
+            item.isViewable);
+    return isASectionHeaderGoingUp || isASectionHeaderGoingDown;
+};

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

@@ -0,0 +1,17 @@
+import type { CardProps } from '../Card';
+interface SelectionProps extends CardProps {
+    /**
+     * Specifies whether the selection is selected.
+     *
+     */
+    selected?: boolean;
+    /**
+     * Callback function that is triggered when the selection changes.
+     *
+     * @param selected
+     */
+    onSelectionChange?: (selected: boolean) => void;
+}
+export declare const Selection: ({ selected, borderRadius, borderColor, backgroundColor, ...otherProps }: SelectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Selection/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,UAAU,cAAe,SAAQ,SAAS;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AAcD,eAAO,MAAM,SAAS,4EAMnB,cAAc,4CAgChB,CAAC"}

package/lib/components/Selection/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTheme } from '../../theme';
+import { Card } from '../Card';
+import { Touchable } from '../Touchable';
+const genCardProps = (theme, status, borderColor, backgroundColor) => ({
+    borderWidth: theme.__hd__.selection.borderWidths[status],
+    borderColor: borderColor || theme.__hd__.selection.borderColors[status],
+    backgroundColor: backgroundColor || theme.__hd__.selection.backgroundColors[status],
+});
+export const Selection = ({ selected = false, borderRadius, borderColor, backgroundColor, ...otherProps }) => {
+    const theme = useTheme();
+    const [status, setStatus] = useState(selected ? 'selected' : 'unselected');
+    const cardProps = useMemo(() => genCardProps(theme, status, borderColor, backgroundColor), [backgroundColor, borderColor, status, theme]);
+    const onPress = useCallback(() => {
+        setStatus(prevStatus => {
+            const newStatus = prevStatus === 'selected' ? 'unselected' : 'selected';
+            otherProps.onSelectionChange?.(newStatus === 'selected');
+            return newStatus;
+        });
+    }, [otherProps]);
+    useEffect(() => setStatus(selected ? 'selected' : 'unselected'), [selected]);
+    return (_jsx(Touchable, { onPress: onPress, ...otherProps, children: _jsx(Card, { ...cardProps, borderRadius: borderRadius || theme.__hd__.selection.defaultBorderRadius, ...otherProps }) }));
+};

package/lib/components/Skeleton/SkeletonBackground.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+export interface SkeletonBackgroundProps extends ViewProps {
+}
+export declare const SkeletonBackground: React.FC<SkeletonBackgroundProps>;
+//# sourceMappingURL=SkeletonBackground.d.ts.map

package/lib/components/Skeleton/SkeletonBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonBackground.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/SkeletonBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAW9C,MAAM,WAAW,uBAAwB,SAAQ,SAAS;CAAG;AAE7D,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA6BhE,CAAC"}

package/lib/components/Skeleton/SkeletonBackground.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useMemo } from 'react';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../theme';
+export const SkeletonBackground = ({ style, ...otherProps }) => {
+    const theme = useTheme();
+    const themeSkeleton = useMemo(() => theme.__hd__.skeleton, [theme]);
+    const backgroundColor = useSharedValue(themeSkeleton.backgroundColors.min);
+    useEffect(() => {
+        backgroundColor.value = withRepeat(withTiming(themeSkeleton.backgroundColors.max, {
+            duration: themeSkeleton.animation.loopInterval,
+            easing: Easing.linear,
+        }), -1, true);
+    }, [
+        backgroundColor,
+        themeSkeleton.animation.loopInterval,
+        themeSkeleton.backgroundColors.max,
+    ]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        backgroundColor: backgroundColor.value,
+    }));
+    return _jsx(Animated.View, { style: [style, animatedStyle], ...otherProps });
+};

package/lib/components/Skeleton/SkeletonWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SkeletonProps } from './types';
+interface SkeletonWrapperProps extends SkeletonProps {
+    onSkeletonVisibilityChange?: (isVisible: boolean) => void;
+}
+export declare const SkeletonWrapper: React.FC<SkeletonWrapperProps>;
+export {};
+//# sourceMappingURL=SkeletonWrapper.d.ts.map

package/lib/components/Skeleton/SkeletonWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/SkeletonWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAcvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,oBAAqB,SAAQ,aAAa;IAClD,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6E1D,CAAC"}

package/lib/components/Skeleton/SkeletonWrapper.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isNil } from 'lodash';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../theme';
+import { Box } from '../Box';
+import { SkeletonBackground } from './SkeletonBackground';
+export const SkeletonWrapper = ({ loading = false, onSkeletonVisibilityChange = () => { }, children, skeletonOverlay, ...otherProps }) => {
+    const theme = useTheme();
+    const themeSkeleton = useMemo(() => theme.__hd__.skeleton, [theme]);
+    const postShowingTimeout = useRef();
+    const skeletonOpacity = useSharedValue(loading ? 1 : 0);
+    const skeletonColor = useSharedValue(themeSkeleton.backgroundColors.min);
+    const animatedContentStyle = useAnimatedStyle(() => ({
+        opacity: 1 - skeletonOpacity.value,
+    }));
+    const animatedSkeletonStyle = useAnimatedStyle(() => ({
+        opacity: skeletonOpacity.value,
+        backgroundColor: skeletonColor.value,
+        borderRadius: themeSkeleton.borderRadius,
+    }));
+    const postShowingCallback = useCallback(() => {
+        if (!isNil(postShowingTimeout.current)) {
+            clearTimeout(postShowingTimeout.current);
+        }
+        postShowingTimeout.current = setTimeout(() => onSkeletonVisibilityChange(loading), themeSkeleton.postShowingTimeout);
+    }, [loading, onSkeletonVisibilityChange, themeSkeleton.postShowingTimeout]);
+    useEffect(() => {
+        skeletonOpacity.value = withTiming(loading ? 1 : 0, {
+            duration: themeSkeleton.animation.showingDuration,
+        }, () => runOnJS(postShowingCallback)());
+    }, [
+        loading,
+        onSkeletonVisibilityChange,
+        postShowingCallback,
+        skeletonOpacity,
+        themeSkeleton.animation.showingDuration,
+    ]);
+    useEffect(() => {
+        skeletonColor.value = withRepeat(withTiming(themeSkeleton.backgroundColors.max, {
+            duration: themeSkeleton.animation.loopInterval,
+        }), -1, true);
+    }, [
+        skeletonColor,
+        themeSkeleton.animation.loopInterval,
+        themeSkeleton.backgroundColors.max,
+    ]);
+    return (_jsxs(Box, { overflow: "hidden", ...otherProps, children: [!skeletonOverlay && (_jsx(Animated.View, { style: animatedContentStyle, children: children })), _jsx(Animated.View, { style: [StyleSheet.absoluteFill, animatedSkeletonStyle], children: _jsx(SkeletonBackground, {}) }), skeletonOverlay && (_jsx(Animated.View, { style: animatedContentStyle, children: children }))] }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyB5C,CAAC"}

package/lib/components/Skeleton/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { Box } from '../Box';
+import { SkeletonWrapper } from './SkeletonWrapper';
+export const Skeleton = ({ loading = true, children, ...otherProps }) => {
+    const [isSkeletonShown, setIsSkeletonShown] = useState(loading);
+    useEffect(() => {
+        if (loading) {
+            setIsSkeletonShown(true);
+        }
+    }, [isSkeletonShown, loading]);
+    if (!isSkeletonShown) {
+        return _jsx(Box, { ...otherProps, children: children });
+    }
+    return (_jsx(SkeletonWrapper, { loading: loading, onSkeletonVisibilityChange: setIsSkeletonShown, ...otherProps, children: children }));
+};

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

@@ -0,0 +1,16 @@
+import type { BoxProps } from '../Box';
+export interface SkeletonProps extends BoxProps {
+    /**
+     * If `true`, the skeleton will be shown.
+     */
+    loading?: boolean;
+    /**
+     * If `true`, the skeleton will be shown as overlay.
+     */
+    skeletonOverlay?: boolean;
+    /**
+     * Callback when the skeleton visibility changes.
+     */
+    postShowingTimeout?: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/lib/components/Skeleton/types.js

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

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

@@ -0,0 +1,14 @@
+import type { ListRenderItem } from 'react-native';
+import type { ListProps } from '../List';
+export interface SlidesProps<T> extends Omit<ListProps<T>, 'renderItem'> {
+    /**
+     * Render a slide.
+     */
+    renderSlide: ListRenderItem<T>;
+    /**
+     * The current slide index.
+     */
+    currentSlideIndex: number;
+}
+export declare function Slides<T>({ renderSlide, currentSlideIndex, onScrollToIndexFailed, ...otherProps }: SlidesProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slides/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,cAAc,CAAC;AAQvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,WAAW,WAAW,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC;IACtE;;OAEG;IACH,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAE/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAkDD,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,WAAW,EACX,iBAAiB,EACjB,qBAAgC,EAChC,GAAG,UAAU,EACd,EAAE,WAAW,CAAC,CAAC,CAAC,2CA8BhB"}

package/lib/components/Slides/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/native';
+import React, { useEffect, useMemo } from 'react';
+import { FlatList, useWindowDimensions } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../theme';
+import { List } from '../List';
+const StyledSlideContainer = styled(Animated.View)(() => {
+    const { width } = useWindowDimensions();
+    return {
+        width,
+    };
+});
+function Slide({ renderSlide, currentSlideIndex, ...info }) {
+    const theme = useTheme();
+    const themeSlides = useMemo(() => theme.__hd__.slides, [theme]);
+    const opacity = useSharedValue(currentSlideIndex === info.index ? 1 : 0);
+    const scale = useSharedValue(currentSlideIndex === info.index ? 1 : themeSlides.outFocusScale);
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [{ scale: scale.value }],
+    }));
+    useEffect(() => {
+        opacity.value = withTiming(currentSlideIndex === info.index ? 1 : 0);
+        scale.value = withTiming(currentSlideIndex === info.index ? 1 : themeSlides.outFocusScale);
+    }, [
+        currentSlideIndex,
+        info.index,
+        opacity,
+        scale,
+        themeSlides.outFocusScale,
+    ]);
+    return (_jsx(StyledSlideContainer, { style: [animatedStyle], children: renderSlide(info) }));
+}
+export function Slides({ renderSlide, currentSlideIndex, onScrollToIndexFailed = () => { }, ...otherProps }) {
+    const listRef = React.useRef(null);
+    useEffect(() => {
+        if (listRef.current) {
+            listRef.current.scrollToIndex({
+                animated: true,
+                index: currentSlideIndex,
+            });
+        }
+    }, [currentSlideIndex]);
+    return (_jsx(List, { ref: listRef, renderItem: info => (_jsx(Slide, { ...info, renderSlide: renderSlide, currentSlideIndex: currentSlideIndex })), initialScrollIndex: currentSlideIndex, onScrollToIndexFailed: onScrollToIndexFailed, pagingEnabled: true, horizontal: true, scrollEnabled: false, ...otherProps }));
+}

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

@@ -0,0 +1,35 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface SquircleProps {
+    /**
+     * The radius of the squircle.
+     *
+     */
+    borderRadius: number;
+    /**
+     * The background color of the squircle.
+     *
+     * @default white
+     */
+    backgroundColor: string;
+    /**
+     * The higher the value, the smoother the border.
+     *
+     * @default 1
+     */
+    borderSmoothing?: number;
+    /**
+     * The width of the squircle.
+     */
+    width: number;
+    /**
+     * The height of the squircle.
+     */
+    height: number;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle> | undefined;
+}
+export declare const Squircle: ({ borderRadius, backgroundColor, borderSmoothing, width, height, style, }: SquircleProps) => import("react/jsx-runtime").JSX.Element;
+export { drawSquirclePath } from './utils';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Squircle/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzD,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;CAC1C;AAMD,eAAO,MAAM,QAAQ,8EAOlB,aAAa,4CAef,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/lib/components/Squircle/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/native';
+import { Canvas, Path } from '@shopify/react-native-skia';
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { drawSquirclePath } from './utils';
+const StyledCanvas = styled(Canvas) `
+  ${StyleSheet.absoluteFill}
+`;
+export const Squircle = ({ borderRadius, backgroundColor, borderSmoothing = 1, width, height, style, }) => {
+    const path = useMemo(() => {
+        return drawSquirclePath({
+            borderSmoothing,
+            borderRadius: borderRadius,
+            width,
+            height,
+        });
+    }, [borderSmoothing, borderRadius, width, height]);
+    return (_jsx(StyledCanvas, { style: style, children: _jsx(Path, { path: path, color: backgroundColor }) }));
+};
+export { drawSquirclePath } from './utils';

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

@@ -0,0 +1,20 @@
+import type { SkPath } from '@shopify/react-native-skia';
+export interface SquircleParams {
+    borderSmoothing: number;
+    borderRadius: number;
+    width: number;
+    height: number;
+}
+export interface SquirclePathParams extends SquircleParams {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    p: number;
+    circularSectionLength: number;
+}
+export interface DrawSquirclePathParams extends SquirclePathParams {
+    path: SkPath;
+    borderRadius: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Squircle/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB"}

package/lib/components/Squircle/types.js

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

package/lib/components/Squircle/utils.d.ts

@@ -0,0 +1,4 @@
+import type { SquircleParams, SquirclePathParams } from './types';
+export declare const getPathParamsForBorder: ({ borderSmoothing, borderRadius, width, height, }: SquircleParams) => SquirclePathParams;
+export declare const drawSquirclePath: ({ borderSmoothing, borderRadius, width, height, }: SquircleParams) => import("@shopify/react-native-skia").SkPath;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/Squircle/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Squircle/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,cAAc,EACd,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAIjB,eAAO,MAAM,sBAAsB,sDAKhC,cAAc,KAAG,kBA0CnB,CAAC;AAsIF,eAAO,MAAM,gBAAgB,sDAK1B,cAAc,gDA0BhB,CAAC"}

package/lib/components/Squircle/utils.js

@@ -0,0 +1,86 @@
+import { Skia } from '@shopify/react-native-skia';
+const degreesToRadians = (degrees) => degrees * (Math.PI / 180);
+export const getPathParamsForBorder = ({ borderSmoothing, borderRadius, width, height, }) => {
+    const maxRadius = Math.min(width, height) / 2;
+    borderRadius = Math.min(borderRadius, maxRadius);
+    const p = Math.min((1 + borderSmoothing) * borderRadius, maxRadius);
+    let angleAlpha, angleBeta;
+    if (borderRadius <= maxRadius / 2) {
+        angleBeta = 90 * (1 - borderSmoothing);
+        angleAlpha = 45 * borderSmoothing;
+    }
+    else {
+        const diffRatio = (borderRadius - maxRadius / 2) / (maxRadius / 2);
+        angleBeta = 90 * (1 - borderSmoothing * (1 - diffRatio));
+        angleAlpha = 45 * borderSmoothing * (1 - diffRatio);
+    }
+    const angleTheta = (90 - angleBeta) / 2;
+    const p3ToP4Distance = borderRadius * Math.tan(degreesToRadians(angleTheta / 2));
+    const circularSectionLength = Math.sin(degreesToRadians(angleBeta / 2)) * borderRadius * Math.sqrt(2);
+    const c = p3ToP4Distance * Math.cos(degreesToRadians(angleAlpha));
+    const d = c * Math.tan(degreesToRadians(angleAlpha));
+    const b = (p - circularSectionLength - c - d) / 3;
+    const a = 2 * b;
+    return {
+        a,
+        b,
+        c,
+        d,
+        p,
+        circularSectionLength,
+        width,
+        height,
+        borderRadius,
+        borderSmoothing,
+    };
+};
+const drawTopRightBorderPath = ({ path, width, height, borderRadius, a, b, c, d, p, circularSectionLength, }) => {
+    path.moveTo(Math.max(width / 2, width - p), 0);
+    path.cubicTo(width - (p - a), 0, width - (p - a - b), 0, width - (p - a - b - c), d);
+    path.rArcTo(borderRadius, borderRadius, 0, true, false, circularSectionLength, circularSectionLength);
+    path.cubicTo(width, p - a - b, width, p - a, width, Math.min(height / 2, p));
+};
+const drawBottomRightBorderPath = ({ path, width, height, borderRadius, a, b, c, d, p, circularSectionLength, }) => {
+    path.lineTo(width, Math.max(height / 2, height - p));
+    path.cubicTo(width, height - (p - a), width, height - (p - a - b), width - d, height - (p - a - b - c));
+    path.rArcTo(borderRadius, borderRadius, 0, true, false, -circularSectionLength, circularSectionLength);
+    path.cubicTo(width - (p - a - b), height, width - (p - a), height, Math.max(width / 2, width - p), height);
+};
+const drawBottomLeftBorderPath = ({ path, width, height, borderRadius, a, b, c, d, p, circularSectionLength, }) => {
+    path.lineTo(Math.min(width / 2, p), height);
+    path.cubicTo(p - a, height, p - a - b, height, p - a - b - c, height - d);
+    path.rArcTo(borderRadius, borderRadius, 0, true, false, -circularSectionLength, -circularSectionLength);
+    path.cubicTo(0, height - (p - a - b), 0, height - (p - a), 0, Math.max(height / 2, height - p));
+};
+const drawTopLeftBorderPath = ({ path, width, height, borderRadius, a, b, c, d, p, circularSectionLength, }) => {
+    path.lineTo(0, Math.min(height / 2, p));
+    path.cubicTo(0, p - a, 0, p - a - b, d, p - a - b - c);
+    path.rArcTo(borderRadius, borderRadius, 0, true, false, circularSectionLength, -circularSectionLength);
+    path.cubicTo(p - a - b, 0, p - a, 0, Math.min(width / 2, p), 0);
+};
+export const drawSquirclePath = ({ borderSmoothing, borderRadius, width, height, }) => {
+    const path = Skia.Path.Make();
+    const defaultPathParams = getPathParamsForBorder({
+        borderSmoothing,
+        borderRadius,
+        width,
+        height,
+    });
+    drawTopRightBorderPath({
+        path,
+        ...defaultPathParams,
+    });
+    drawBottomRightBorderPath({
+        path,
+        ...defaultPathParams,
+    });
+    drawBottomLeftBorderPath({
+        path,
+        ...defaultPathParams,
+    });
+    drawTopLeftBorderPath({
+        path,
+        ...defaultPathParams,
+    });
+    return path;
+};

package/lib/components/Text/StyledText.d.ts

@@ -0,0 +1,18 @@
+import { Text } from 'react-native';
+import type { Color, FontSize, FontWeight, Scale } from '../../theme';
+declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeFontSize: FontSize;
+    themeFontWeight?: FontWeight;
+    themeColor: Color;
+    themeTypeface: keyof Scale["font"];
+    textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
+    textTransform?: "none" | "capitalize" | "uppercase" | "lowercase" | undefined;
+    textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export { StyledText };
+//# sourceMappingURL=StyledText.d.ts.map

package/lib/components/Text/StyledText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledText.d.ts","sourceRoot":"","sources":["../../../src/components/Text/StyledText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEtE,QAAA,MAAM,UAAU;;SAwCuwH,MAAO,WAAW;;mBAvCxxH,QAAQ;sBACL,UAAU;gBAChB,KAAK;mBACF,MAAM,KAAK,CAAC,MAAM,CAAC;gBACtB,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS;oBACzD,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS;yBACxD,MAAM,GAAG,WAAW,GAAG,cAAc,GAAG,wBAAwB,GAAG,SAAS;;;EA8BhG,CAAC;AAEH,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/lib/components/Text/StyledText.js

@@ -0,0 +1,19 @@
+import styled from '@emotion/native';
+import { Text } from 'react-native';
+const StyledText = styled(Text)(({ themeFontSize, themeFontWeight, themeColor, themeTypeface, theme, textAlign, textTransform, textDecorationLine, }) => {
+    const defaultThemeFontWeight = theme.__hd__.text.fontWeights[themeFontSize];
+    const sizeStyles = {
+        fontSize: theme.__hd__.text.fontSizes[themeFontSize],
+        lineHeight: theme.__hd__.text.lineHeights[themeFontSize],
+        letterSpacing: theme.__hd__.text.fontSizes[themeFontSize] * 0.03,
+    };
+    return {
+        ...sizeStyles,
+        fontFamily: theme.__hd__.text.fonts[themeTypeface][themeFontWeight || defaultThemeFontWeight],
+        color: theme.colors[themeColor],
+        textAlign,
+        textTransform,
+        textDecorationLine,
+    };
+});
+export { StyledText };

package/lib/components/Text/constants.d.ts

@@ -0,0 +1,3 @@
+import type { TagStyle } from './types';
+export declare const SUPPORTED_RICH_TEXT_TAGS: TagStyle[];
+//# sourceMappingURL=constants.d.ts.map

package/lib/components/Text/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Text/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,wBAAwB,EAAE,QAAQ,EAK9C,CAAC"}

package/lib/components/Text/constants.js

@@ -0,0 +1,6 @@
+export const SUPPORTED_RICH_TEXT_TAGS = [
+    {
+        pattern: /<strong>(.*?)<\/strong>/g,
+        props: { fontWeight: 'bold' },
+    },
+];

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

@@ -0,0 +1,6 @@
+import type { TextProps } from './types';
+export declare const Text: (props: TextProps & {
+    useRichText?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export type { TextProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgCzC,eAAO,MAAM,IAAI;eAGqV,CAAC;6CAH5T,CAAC;AAE5C,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/lib/components/Text/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledText } from './StyledText';
+import { withRichText } from './withRichText';
+const PlainText = ({ children, fontSize = 'medium', fontWeight, color = 'grey900', typeface = 'neutral', allowFontScaling = false, textAlign, textTransform, textDecorationLine, ...nativeProps }) => {
+    return (_jsx(StyledText, { ...nativeProps, themeFontSize: fontSize, themeFontWeight: fontWeight, themeColor: color, themeTypeface: typeface, allowFontScaling: allowFontScaling, textAlign: textAlign, textTransform: textTransform, textDecorationLine: textDecorationLine, children: children }));
+};
+export const Text = withRichText(PlainText);