@aic-kits/react-native 0.0.2 → 0.0.4

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

@@ -0,0 +1,34 @@
+import type { AccessibilityProps, StyleProp, TextStyle } from 'react-native';
+import type { Color, Size } from '../../theme';
+import { IconList, type IconName } from './PlainIcon';
+import { isSimpledAIIcon } from './utils';
+export type { IconName };
+export { IconList, isSimpledAIIcon };
+export interface IconProps extends AccessibilityProps {
+    /**
+     * Name of the Icon.
+     */
+    icon: IconName;
+    /**
+     * Color of the Icon.
+     */
+    color?: Color;
+    /**
+     * Size of the Icon.
+     */
+    size?: Size | number;
+    /**
+     * Rotate icon with animation.
+     */
+    spin?: boolean;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle> | undefined;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7E,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAa,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,YAAY,EAAE,QAAQ,EAAE,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;AAErC,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8CpC,CAAC"}

package/lib/components/Icon/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnimatedIcon } from './AnimatedIcon';
+import { IconList, PlainIcon } from './PlainIcon';
+import { isSimpledAIIcon } from './utils';
+export { IconList, isSimpledAIIcon };
+export const Icon = ({ icon, style, size = 'medium', color = 'grey900', testID, spin = false, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, accessibilityValue, accessibilityLiveRegion, accessibilityElementsHidden, accessible, accessibilityIgnoresInvertColors, accessibilityViewIsModal, accessibilityActions, }) => {
+    const accessibilityProps = {
+        accessibilityLabel,
+        accessibilityHint,
+        accessibilityRole,
+        accessibilityState,
+        accessibilityValue,
+        accessibilityLiveRegion,
+        accessibilityElementsHidden,
+        accessible,
+        accessibilityIgnoresInvertColors,
+        accessibilityViewIsModal,
+        accessibilityActions,
+    };
+    const IconWrapper = spin ? AnimatedIcon : PlainIcon;
+    return (_jsx(IconWrapper, { name: icon, themeColor: color, themeSize: size, 
+        // @ts-ignore
+        style: style, testID: testID, ...accessibilityProps }));
+};

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

@@ -0,0 +1,3 @@
+import { type IconName } from './PlainIcon';
+export declare const isSimpledAIIcon: (x: any) => x is IconName;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEtD,eAAO,MAAM,eAAe,MAAO,GAAG,KAAG,CAAC,IAAI,QAAgC,CAAC"}

package/lib/components/Icon/utils.js

@@ -0,0 +1,2 @@
+import { IconList } from './PlainIcon';
+export const isSimpledAIIcon = (x) => IconList.includes(x);

package/lib/components/Image/ImageDetail.d.ts

@@ -0,0 +1,11 @@
+import { type SkImage } from '@shopify/react-native-skia';
+import type { DimensionValue } from 'react-native';
+interface ImageDetailProps {
+    image: SkImage | null;
+    width?: DimensionValue;
+    height?: DimensionValue;
+    onBack: () => void;
+}
+declare const ImageDetail: ({ image, width, height, onBack, }: ImageDetailProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageDetail;
+//# sourceMappingURL=ImageDetail.d.ts.map

package/lib/components/Image/ImageDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageDetail.d.ts","sourceRoot":"","sources":["../../../src/components/Image/ImageDetail.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,OAAO,EAEb,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,cAAc,CAAC;AAMtE,UAAU,gBAAgB;IACxB,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAEtB,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAMD,QAAA,MAAM,WAAW,sCAKd,gBAAgB,4CA6DlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Image/ImageDetail.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/native';
+import { useTheme } from '@emotion/react';
+import { Canvas, Group, Image, rect, rrect, } from '@shopify/react-native-skia';
+import { isNumber } from 'lodash';
+import { useCallback, useState } from 'react';
+import { Base, Box, Icon, Touchable } from '../../components';
+import { calculateCanvasSize } from './utils';
+const StyledCanvas = styled(Canvas) `
+	flex: 1;
+`;
+const ImageDetail = ({ image, width, height, onBack, }) => {
+    const theme = useTheme();
+    const themeImage = theme.__hd__.image;
+    const [boxWidth, setBoxWidth] = useState(0);
+    const [boxHeight, setBoxHeight] = useState(0);
+    const [roundedRect, setRoundedRect] = useState(null);
+    const onLayout = useCallback((event) => {
+        const { width: sWidth, height: sHeight } = event.nativeEvent.layout;
+        if ((sWidth !== boxWidth || sHeight !== boxHeight)) {
+            setBoxWidth(sWidth);
+            setBoxHeight(sHeight);
+            const { width: scaledWidth, height: scaledHeight, } = calculateCanvasSize(width, height, sWidth, 1, sWidth / sHeight);
+            if (isNumber(scaledWidth) && isNumber(scaledHeight)) {
+                const rectSize = rrect(rect((sWidth - scaledWidth) / 2, (sHeight - scaledHeight) / 2, scaledWidth, scaledHeight), theme.radii.xxxlarge, theme.radii.xxxlarge);
+                setRoundedRect(rectSize);
+            }
+        }
+    }, [boxHeight, boxWidth, height, theme.radii.xxxlarge, width]);
+    return (_jsxs(Base, { flex: 1, padding: "large", marginBottom: "large", children: [_jsx(Box, { height: themeImage.defaultDetailPageHeaderHeight, children: _jsx(Touchable, { onPress: onBack, children: _jsx(Icon, { art: "arrow-left-light", size: themeImage.defaultDetailPageHeaderHeight }) }) }), _jsx(Box, { flex: 1, children: _jsx(StyledCanvas, { onLayout: onLayout, children: roundedRect &&
+                        _jsx(Group, { clip: roundedRect, children: _jsx(Image, { image: image, x: roundedRect.rect.x, y: roundedRect.rect.y, width: roundedRect.rect.width, height: roundedRect.rect.height, fit: "scaleDown" }) }) }) })] }));
+};
+export default ImageDetail;

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

@@ -0,0 +1,11 @@
+import { type SkImage } from '@shopify/react-native-skia';
+interface ImageProps {
+    image: SkImage | null;
+    canvasSize: {
+        width: number | undefined;
+        height: number | undefined;
+    };
+}
+export declare const Image: ({ image, canvasSize, ...otherProps }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,OAAO,EAAsB,MAAM,4BAA4B,CAAC;AAKtF,UAAU,UAAU;IAClB,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACtB,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAA;CACtE;AAED,eAAO,MAAM,KAAK,yCAIf,UAAU,4CAaZ,CAAC"}

package/lib/components/Image/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Canvas, Image as RNSkImage } from '@shopify/react-native-skia';
+import { isNil } from 'lodash';
+import { Skeleton } from '../Skeleton';
+export const Image = ({ image, canvasSize, ...otherProps }) => (_jsx(Skeleton, { style: canvasSize, loading: isNil(image), ...otherProps, children: _jsx(Canvas, { style: canvasSize, children: _jsx(RNSkImage, { image: image, x: 0, y: 0, width: canvasSize.width, height: canvasSize.height }) }) }));

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

@@ -0,0 +1,6 @@
+import type { DimensionValue } from 'react-native';
+export declare const calculateCanvasSize: (mediaWidth?: DimensionValue, mediaHeight?: DimensionValue, maxWidth?: DimensionValue, scaleRatio?: number, boxAspectRatio?: number) => {
+    width: number | undefined;
+    height: number | undefined;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Image/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,eAAO,MAAM,mBAAmB,gBACjB,cAAc,gBACb,cAAc,aACjB,cAAc,eACb,MAAM,mBACF,MAAM,KACrB;IAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;CAYzD,CAAC"}

package/lib/components/Image/utils.js

@@ -0,0 +1,12 @@
+import { isNumber } from 'lodash';
+export const calculateCanvasSize = (mediaWidth, mediaHeight, maxWidth, scaleRatio = 1, boxAspectRatio = 3 / 4) => {
+    if (!isNumber(mediaWidth) || !isNumber(mediaHeight) || !isNumber(maxWidth)) {
+        return { width: undefined, height: undefined };
+    }
+    const scaleDown = (mediaWidth / mediaHeight) / boxAspectRatio;
+    const scaledWidth = Math.min(1, scaleDown) * maxWidth * scaleRatio;
+    return {
+        width: scaledWidth,
+        height: scaledWidth / mediaWidth * mediaHeight,
+    };
+};

package/lib/components/InfoCard/BasicInfoCard.d.ts

@@ -0,0 +1,19 @@
+import { type ArtProps } from '../Art';
+import { type BoxProps } from '../Box';
+import { type CardProps } from '../Card';
+import { type TextProps } from '../Text';
+export type InfoItem = {
+    title: TextProps;
+    subtitle: TextProps;
+    icon?: ArtProps;
+    verticalContainer?: BoxProps;
+    horizontalContainer?: BoxProps;
+};
+export interface BasicInfoCardProps extends CardProps {
+    /**
+     * List of items to display.
+     */
+    infoItems: InfoItem[];
+}
+export declare const BasicInfoCard: ({ infoItems, ...otherProps }: BasicInfoCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BasicInfoCard.d.ts.map

package/lib/components/InfoCard/BasicInfoCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicInfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/InfoCard/BasicInfoCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,mBAAmB,CAAC,EAAE,QAAQ,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAmCD,eAAO,MAAM,aAAa,iCAGvB,kBAAkB,4CAoBpB,CAAC"}

package/lib/components/InfoCard/BasicInfoCard.js

@@ -0,0 +1,18 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isNil } from 'lodash';
+import { useMemo } from 'react';
+import { useTheme } from '../../theme';
+import { Art } from '../Art';
+import { Box } from '../Box';
+import { Card } from '../Card';
+import { Divider } from '../Divider';
+import { Text } from '../Text';
+const InfoCardItem = ({ title, subtitle, icon, isFirst, verticalContainer, horizontalContainer, }) => {
+    return (_jsxs(_Fragment, { children: [!isFirst && _jsx(Divider, { marginVertical: "medium" }), _jsxs(Box, { flexDirection: "row", gap: "large", ...horizontalContainer, children: [!isNil(icon) && (_jsx(Box, { flexDirection: "column", justifyContent: "flex-start", children: _jsx(Art, { ...icon }) })), _jsxs(Box, { flexDirection: "column", flex: 1, gap: "small", ...verticalContainer, children: [_jsx(Text, { fontSize: "h4", fontWeight: "bold", ...title }), _jsx(Text, { fontSize: "xlarge", fontWeight: "medium", color: "grey700", ...subtitle })] })] })] }));
+};
+export const BasicInfoCard = ({ infoItems, ...otherProps }) => {
+    const theme = useTheme();
+    const themeInfoCard = useMemo(() => theme.__hd__.infoCard, [theme]);
+    return (_jsx(Card, { backgroundColor: themeInfoCard.defaultBackgroundColor, borderRadius: themeInfoCard.defaultBorderRadius, borderColor: themeInfoCard.defaultBorderColor, borderWidth: themeInfoCard.defaultBorderWidth, padding: "large", ...otherProps, children: infoItems.map((item, index) => (_createElement(InfoCardItem, { ...item, key: `info-card-item-${index}`, isFirst: index === 0 }))) }));
+};

package/lib/components/InfoCard/NewsInfoCard.d.ts

@@ -0,0 +1,22 @@
+import type { DataSource } from '@shopify/react-native-skia';
+import { type CardProps } from '../Card';
+export interface NewsInfoCardProps extends CardProps {
+    /**
+     * Title of the news.
+     */
+    title: string;
+    /**
+     * Subtitle of the news.
+     */
+    subtitle: string;
+    /**
+     * Image of the news.
+     */
+    image: DataSource;
+    /**
+     * On press of the news.
+     */
+    onPress?: () => void;
+}
+export declare const NewsInfoCard: (props: NewsInfoCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NewsInfoCard.d.ts.map

package/lib/components/InfoCard/NewsInfoCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewsInfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/InfoCard/NewsInfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAM7D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAI/C,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,4CAgDpD,CAAC"}

package/lib/components/InfoCard/NewsInfoCard.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTheme } from '../../theme';
+import { Art } from '../Art';
+import { Box } from '../Box';
+import { Card } from '../Card';
+import { Text } from '../Text';
+import { Touchable } from '../Touchable';
+export const NewsInfoCard = (props) => {
+    const theme = useTheme();
+    const themeInfoCard = useMemo(() => theme.__hd__.infoCard, [theme]);
+    const themeNewsInfoCard = useMemo(() => themeInfoCard.newsInfoCard, [themeInfoCard]);
+    const { title, subtitle, image, onPress, ...otherProps } = props;
+    return (_jsx(Touchable, { onPress: onPress, children: _jsx(Card, { backgroundColor: themeInfoCard.defaultBackgroundColor, borderRadius: themeInfoCard.defaultBorderRadius, borderColor: themeInfoCard.defaultBorderColor, borderWidth: themeInfoCard.defaultBorderWidth, overflow: "hidden", ...otherProps, children: _jsxs(Box, { flexDirection: "row", children: [_jsx(Art, { art: image, type: "image", width: themeNewsInfoCard.imageSize, height: themeNewsInfoCard.imageSize, fit: "cover" }), _jsxs(Box, { flexDirection: "column", padding: "large", flex: 1, children: [_jsx(Box, { marginBottom: "medium", children: _jsx(Text, { fontSize: "h5", fontWeight: "bold", numberOfLines: themeNewsInfoCard.defaultTitleLines, children: title }) }), _jsx(Text, { fontSize: "large", fontWeight: "medium", color: "grey700", numberOfLines: themeNewsInfoCard.defaultSubtitleLines, children: subtitle })] })] }) }) }));
+};

package/lib/components/InfoCard/ThumbnailInfoCard.d.ts

@@ -0,0 +1,33 @@
+import type { DataSource } from '@shopify/react-native-skia';
+import { type CardProps } from '../Card';
+export interface ThumbnailInfoCardProps extends CardProps {
+    /**
+     * Title of the thumbnail.
+     */
+    title: string;
+    /**
+     * Subtitle of the thumbnail.
+     */
+    subtitle: string;
+    /**
+     * Image of the thumbnail.
+     */
+    image: DataSource;
+    /**
+     * Shared transition tag of the thumbnail, applicable for shared-element transition of react-navigation.
+       * @tutorial
+       * https://reactnavigation.org/docs/shared-element-transitions/
+     */
+    imageSharedTransitionTag?: string;
+    /**
+     * Ratio of the thumbnail.
+     * @default 1
+     */
+    ratio?: number;
+    /**
+     * On press of the thumbnail.
+     */
+    onPress?: () => void;
+}
+export declare const ThumbnailInfoCard: (props: ThumbnailInfoCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThumbnailInfoCard.d.ts.map

package/lib/components/InfoCard/ThumbnailInfoCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailInfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/InfoCard/ThumbnailInfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAO7D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAK/C,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACJ,KAAK,EAAE,UAAU,CAAC;IAEjB;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,4CAiF9D,CAAC"}

package/lib/components/InfoCard/ThumbnailInfoCard.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useTheme } from '../../theme';
+import { Art } from '../Art';
+import { Box } from '../Box';
+import { Card } from '../Card';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { Touchable } from '../Touchable';
+export const ThumbnailInfoCard = (props) => {
+    const theme = useTheme();
+    const themeInfoCard = useMemo(() => theme.__hd__.infoCard, [theme]);
+    const themeThumbnailInfoCard = useMemo(() => themeInfoCard.thumbnailInfoCard, [themeInfoCard]);
+    const { title, subtitle, image, onPress, ratio = themeThumbnailInfoCard.defaultImageRatio, imageSharedTransitionTag, ...otherProps } = props;
+    const { width: screenWidth } = useWindowDimensions();
+    const thumbnailWidth = useMemo(() => {
+        return screenWidth - theme.spaces.large * 2;
+    }, [screenWidth, theme.spaces.large]);
+    const thumbnailHeight = useMemo(() => {
+        return thumbnailWidth / ratio;
+    }, [thumbnailWidth, ratio]);
+    return (_jsx(Card, { backgroundColor: themeInfoCard.defaultBackgroundColor, borderRadius: themeInfoCard.defaultBorderRadius, borderColor: themeInfoCard.defaultBorderColor, borderWidth: themeInfoCard.defaultBorderWidth, overflow: "hidden", ...otherProps, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Art, { art: image, type: "image", width: thumbnailWidth, height: thumbnailHeight, fit: "cover", sharedTransitionTag: imageSharedTransitionTag }), _jsxs(Box, { padding: "large", children: [_jsxs(Box, { marginBottom: "medium", flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { fontSize: "h5", fontWeight: "bold", numberOfLines: themeThumbnailInfoCard.defaultTitleLines, children: title }), _jsx(Touchable, { onPress: onPress, hitSlop: themeThumbnailInfoCard.rightButton.hitSlop, hapticFeedback: themeThumbnailInfoCard.rightButton.hapticFeedback, children: _jsx(Icon, { icon: themeThumbnailInfoCard.rightButton.icon, color: themeThumbnailInfoCard.rightButton.color, size: themeThumbnailInfoCard.rightButton.size }) })] }), _jsx(Text, { fontSize: "large", fontWeight: "medium", color: "grey700", numberOfLines: themeThumbnailInfoCard.defaultSubtitleLines, children: subtitle })] })] }) }));
+};

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

@@ -0,0 +1,15 @@
+import { type BasicInfoCardProps } from './BasicInfoCard';
+import { type NewsInfoCardProps } from './NewsInfoCard';
+import { type ThumbnailInfoCardProps } from './ThumbnailInfoCard';
+export type InfoCardType = 'basic' | 'thumbnail' | 'news';
+export type InfoCardProps = ({
+    type: 'basic';
+} & BasicInfoCardProps) | ({
+    type: 'thumbnail';
+} & ThumbnailInfoCardProps) | ({
+    type: 'news';
+} & NewsInfoCardProps);
+export declare const InfoCard: (props: InfoCardProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { InfoItem } from './BasicInfoCard';
+export type { BasicInfoCardProps, NewsInfoCardProps, ThumbnailInfoCardProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InfoCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAErF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,aAAa,GACrB,CAAC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG,kBAAkB,CAAC,GACxC,CAAC;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GAAG,sBAAsB,CAAC,GAChD,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,iBAAiB,CAAC,CAAC;AAE3C,eAAO,MAAM,QAAQ,UAAW,aAAa,mDAW5C,CAAC;AAEF,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,CAAC"}

package/lib/components/InfoCard/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BasicInfoCard } from './BasicInfoCard';
+import { NewsInfoCard } from './NewsInfoCard';
+import { ThumbnailInfoCard } from './ThumbnailInfoCard';
+export const InfoCard = (props) => {
+    switch (props.type) {
+        case 'basic':
+            return _jsx(BasicInfoCard, { ...props });
+        case 'thumbnail':
+            return _jsx(ThumbnailInfoCard, { ...props });
+        case 'news':
+            return _jsx(NewsInfoCard, { ...props });
+        default:
+            return null;
+    }
+};

package/lib/components/Input/StyledInput.d.ts

@@ -0,0 +1,13 @@
+import { TextInput } from 'react-native';
+import type { InputType } from '../../theme';
+declare const StyledInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    type: InputType;
+    textAlign?: "left" | "right" | "center" | undefined;
+}, {}, {
+    ref?: import("react").Ref<TextInput> | undefined;
+}>;
+export { StyledInput };
+//# sourceMappingURL=StyledInput.d.ts.map

package/lib/components/Input/StyledInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledInput.d.ts","sourceRoot":"","sources":["../../../src/components/Input/StyledInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,QAAA,MAAM,WAAW;;SAkB00I,MAAO,WAAW;;UAjBr2I,SAAS;gBACH,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS;;;EAanD,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/lib/components/Input/StyledInput.js

@@ -0,0 +1,14 @@
+import styled from '@emotion/native';
+import { TextInput } from 'react-native';
+const StyledInput = styled(TextInput)(({ theme, type, textAlign }) => {
+    const inputConfig = theme.__hd__.input.inputConfigs[type];
+    return {
+        fontFamily: theme.__hd__.text.fonts[inputConfig.typeface][inputConfig.fontWeight],
+        fontSize: theme.fontSizes[inputConfig.fontSize],
+        lineHeight: theme.lineHeights[inputConfig.fontSize],
+        letterSpacing: theme.letterSpacings[inputConfig.fontSize],
+        color: theme.colors[inputConfig.color],
+        textAlign,
+    };
+});
+export { StyledInput };

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

@@ -0,0 +1,34 @@
+import { type ForwardedRef } from 'react';
+import type { StyleProp, TextInputProps as NativeTextInputProps, ViewStyle, TextInput } from 'react-native';
+import { type InputType } from '../../theme';
+export interface InputProps extends NativeTextInputProps {
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Specifies the alignment of the text.
+     */
+    textAlign?: 'left' | 'right' | 'center' | undefined;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * The type of input.
+     * - `default`: The default input type.
+     * - `underlined`: The underlined input type.
+     * @default 'default'
+     */
+    type?: InputType;
+    /**
+     * The label of the input.
+     */
+    label?: string;
+}
+declare function PlainInput(props: InputProps, ref: ForwardedRef<TextInput>): import("react/jsx-runtime").JSX.Element;
+export declare const Input: (props: InputProps & {
+    ref?: ForwardedRef<TextInput>;
+}) => ReturnType<typeof PlainInput>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EACV,SAAS,EACT,cAAc,IAAI,oBAAoB,EACtC,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,aAAa,CAAC;AAOvD,MAAM,WAAW,UAAW,SAAQ,oBAAoB;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACJ,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,CAAC,SAAS,CAAC,2CA0ClE;AAED,eAAO,MAAM,KAAK,EAA6B,CAC7C,KAAK,EAAE,UAAU,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KAClD,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}

package/lib/components/Input/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { useTheme } from '../../theme';
+import { Box } from '../Box';
+import { Card } from '../Card';
+import { Text } from '../Text';
+import { StyledInput } from './StyledInput';
+function PlainInput(props, ref) {
+    const theme = useTheme();
+    const themeInput = useMemo(() => theme.__hd__.input, [theme.__hd__.input]);
+    const { textAlign, label, type = themeInput.defaultInputType, ...nativeProps } = props;
+    const inputConfig = useMemo(() => themeInput.inputConfigs[type], [themeInput, type]);
+    return (_jsxs(Card, { backgroundColor: inputConfig.backgroundColor, borderRadius: inputConfig.borderRadius, paddingHorizontal: inputConfig.paddingHorizontal, paddingVertical: inputConfig.paddingVertical, borderBottomWidth: inputConfig.borderBottomWidth, borderBottomColor: inputConfig.borderBottomColor, children: [label && (_jsx(Box, { marginBottom: "small", children: _jsx(Text, { fontSize: themeInput.labelFontSize, fontWeight: themeInput.labelFontWeight, children: label }) })), _jsx(StyledInput, { ref: ref, type: type, textAlign: textAlign, placeholderTextColor: theme.colors[inputConfig.placeholderTextColor], ...nativeProps })] }));
+}
+export const Input = forwardRef(PlainInput);

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

@@ -0,0 +1,12 @@
+import { type SharedValue } from 'react-native-reanimated';
+export interface CircularProgressProps {
+    progress: SharedValue<number>;
+    width: number;
+    height: number;
+    backgroundColor: string;
+    foregroundColor: string;
+    strokeWidth: number;
+    springMass: number;
+}
+export declare const CircularProgress: ({ progress, width, height, backgroundColor, foregroundColor, strokeWidth, }: CircularProgressProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CircularProgress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../src/components/LevelStep/CircularProgress.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAmB,MAAM,yBAAyB,CAAC;AAE5E,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,gFAO1B,qBAAqB,4CAqDvB,CAAC"}

package/lib/components/LevelStep/CircularProgress.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group, Path, Skia } from '@shopify/react-native-skia';
+import { useDerivedValue } from 'react-native-reanimated';
+export const CircularProgress = ({ progress, width, height, backgroundColor, foregroundColor, strokeWidth, }) => {
+    const sweepAngle = useDerivedValue(() => progress.value * 360);
+    const backgroundPathValue = useDerivedValue(() => {
+        const path = Skia.Path.Make();
+        path.addArc({
+            x: strokeWidth / 2,
+            y: strokeWidth / 2,
+            width: width - strokeWidth,
+            height: height - strokeWidth,
+        }, 0, 360);
+        return path;
+    });
+    const foregroundPathValue = useDerivedValue(() => {
+        const path = Skia.Path.Make();
+        path.addArc({
+            x: strokeWidth / 2,
+            y: strokeWidth / 2,
+            width: width - strokeWidth,
+            height: height - strokeWidth,
+        }, -90, sweepAngle.value);
+        return path;
+    });
+    return (_jsxs(Group, { children: [_jsx(Path, { path: backgroundPathValue, antiAlias: true, style: "stroke", color: backgroundColor, strokeWidth: strokeWidth, strokeCap: "round" }), _jsx(Path, { path: foregroundPathValue, antiAlias: true, style: "stroke", color: foregroundColor, strokeWidth: strokeWidth, strokeCap: "round" })] }));
+};

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

@@ -0,0 +1,13 @@
+import { type DataSourceParam } from '@shopify/react-native-skia';
+import { type DerivedValue } from 'react-native-reanimated';
+export interface TransformedSvgProps {
+    source: DataSourceParam;
+    box: DerivedValue<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+}
+export declare const TransformedSvg: (props: TransformedSvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TransformedSvg.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransformedSvg.d.ts","sourceRoot":"","sources":["../../../src/components/LevelStep/TransformedSvg.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EAMrB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,yBAAyB,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,GAAG,EAAE,YAAY,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5E;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,4CAkBxD,CAAC"}

package/lib/components/LevelStep/TransformedSvg.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fitbox, Group, ImageSVG, rect, useSVG, } from '@shopify/react-native-skia';
+import { useDerivedValue } from 'react-native-reanimated';
+export const TransformedSvg = (props) => {
+    const { source, box } = props;
+    const svg = useSVG(source);
+    const svgTransform = useDerivedValue(() => fitbox('contain', rect(0, 0, svg?.width() || 0, svg?.height() || 0), rect(box.value.x, box.value.y, box.value.width, box.value.height)));
+    return (_jsx(Group, { transform: svgTransform, children: _jsx(ImageSVG, { svg: svg }) }));
+};

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

@@ -0,0 +1,8 @@
+import type { DataSourceParam } from '@shopify/react-native-skia';
+import type { Color, LevelStepType } from '../../theme';
+export declare const LEVEL_STEP_ASSETS: Record<LevelStepType, {
+    top: DataSourceParam;
+    bottom: DataSourceParam;
+    color: Color;
+}>;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/LevelStep/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CACpC,aAAa,EACb;IAAE,GAAG,EAAE,eAAe,CAAC;IAAC,MAAM,EAAE,eAAe,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAiBhE,CAAC"}

package/lib/components/LevelStep/constants.js

@@ -0,0 +1,17 @@
+export const LEVEL_STEP_ASSETS = {
+    active: {
+        top: require('../../assets/svg/level-step/active/top.svg'),
+        bottom: require('../../assets/svg/level-step/active/bottom.svg'),
+        color: 'primary',
+    },
+    locked: {
+        top: require('../../assets/svg/level-step/locked/top.svg'),
+        bottom: require('../../assets/svg/level-step/locked/bottom.svg'),
+        color: 'disabled',
+    },
+    passed: {
+        top: require('../../assets/svg/level-step/passed/top.svg'),
+        bottom: require('../../assets/svg/level-step/passed/bottom.svg'),
+        color: 'secondary',
+    },
+};

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

@@ -0,0 +1,3 @@
+import type { LevelStepProps } from './types';
+export declare const LevelStep: (props: LevelStepProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LevelStep/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,SAAS,UAAW,cAAc,4CAqH9C,CAAC"}