@aic-kits/react-native 0.0.3 → 0.0.5

package/lib/components/Chat/TextChat.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@emotion/react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState, } from 'react';
+import { Text } from '../Text';
+function PlainTextChat({ streamText, children, ...otherProps }, ref) {
+    const [text, setText] = useState('');
+    const theme = useTheme();
+    const themeBubble = useMemo(() => theme.__hd__.chat, [theme]);
+    useEffect(() => {
+        let isCancelled = false;
+        const fetchText = async () => {
+            if (streamText) {
+                for await (const chunk of streamText()) {
+                    if (isCancelled) {
+                        return;
+                    }
+                    setText((prev) => prev + chunk);
+                }
+            }
+        };
+        fetchText();
+        return () => {
+            isCancelled = true;
+        };
+    }, [streamText]);
+    useImperativeHandle(ref, () => ({
+        bubbleProps: {
+            paddingHorizontal: themeBubble.defaultTextPaddingHorizontal,
+            paddingVertical: themeBubble.defaultTextPaddingVertical,
+        },
+    }), [
+        themeBubble.defaultTextPaddingHorizontal,
+        themeBubble.defaultTextPaddingVertical,
+    ]);
+    return (_jsx(Text, { fontSize: themeBubble.defaultTextFontSize, fontWeight: themeBubble.defaultTextFontWeight, color: themeBubble.defaultTextColor, ...otherProps, children: streamText ? text : children }));
+}
+export const TextChat = forwardRef(PlainTextChat);

package/lib/components/Chat/VideoChat.d.ts

@@ -0,0 +1,6 @@
+import { type ForwardedRef } from 'react';
+import type { ChatRef, VideoChatProps } from './type';
+export declare const VideoChat: (props: VideoChatProps & {
+    ref?: ForwardedRef<ChatRef>;
+}) => React.ReactNode;
+//# sourceMappingURL=VideoChat.d.ts.map

package/lib/components/Chat/VideoChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoChat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/VideoChat.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,YAAY,EAOlB,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAiHtD,eAAO,MAAM,SAAS,EAAiC,CACrD,KAAK,EAAE,cAAc,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;CAAE,KACpD,KAAK,CAAC,SAAS,CAAC"}

package/lib/components/Chat/VideoChat.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@emotion/react';
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { Box } from '../Box';
+import { calculateCanvasSize } from '../Image/utils';
+import { PlaySwitch } from '../PlaySwitch';
+import { Video } from '../Video';
+import VideoDetail from '../Video/VideoDetail';
+const PlainVideoChat = ({ source, width, height, maxWidth, setMediaDetail, }, chatRef) => {
+    const theme = useTheme();
+    const themeChat = useMemo(() => theme.__hd__.chat, [theme]);
+    const canvasSize = calculateCanvasSize(width, height, maxWidth, themeChat.defaultMediaScale);
+    const previewRef = useRef(null);
+    const detailRef = useRef(null);
+    const [play, setPlay] = useState(false);
+    const [showPlaySwitch, setShowPlaySwitch] = useState(true);
+    const syncRef = useCallback(async (src, dst) => {
+        if (src === null || dst === null) {
+            return;
+        }
+        const currentTime = src.currentTime;
+        dst.seek(currentTime, 0);
+    }, []);
+    const pauseAllStates = useCallback(() => {
+        previewRef.current?.pause();
+        setShowPlaySwitch(true);
+        setPlay(false);
+    }, [previewRef, setPlay, setShowPlaySwitch]);
+    const exitDetailView = useCallback(() => {
+        setMediaDetail?.(undefined);
+        syncRef(detailRef.current, previewRef.current);
+        pauseAllStates();
+    }, [pauseAllStates, setMediaDetail, syncRef]);
+    const handlePlaySwitchStatus = () => {
+        if (play) {
+            pauseAllStates();
+            return;
+        }
+        previewRef.current?.resume();
+        setTimeout(() => setShowPlaySwitch(false), 500);
+        setPlay(true);
+    };
+    useImperativeHandle(chatRef, () => ({
+        onPress: async () => {
+            const mediaDetail = (_jsx(VideoDetail, { variant: 'video', videoRef: detailRef, source: source, width: width, height: height, initialPosition: previewRef.current?.currentTime, onBack: exitDetailView }));
+            setMediaDetail?.(mediaDetail);
+            previewRef.current?.pause();
+        },
+    }), [exitDetailView, height, setMediaDetail, source, width]);
+    return (_jsxs(Box, { position: "relative", width: canvasSize.width, height: canvasSize.height, children: [_jsx(Video, { ref: previewRef, source: source, style: {
+                    width: canvasSize.width,
+                    height: canvasSize.height,
+                }, afterEnd: pauseAllStates }), _jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "center", alignItems: "center", children: showPlaySwitch &&
+                    _jsx(PlaySwitch, { status: play ? 'pause' : 'play', onChange: handlePlaySwitchStatus, size: 'xlarge', color: "white" }) })] }));
+};
+export const VideoChat = forwardRef(PlainVideoChat);

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAW,MAAM,QAAQ,CAAC;AAGjD,eAAO,MAAM,IAAI,UAAW,SAAS,4CAoCpC,CAAC;AAEF,cAAc,QAAQ,CAAC"}

package/lib/components/Chat/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Bubble } from '../Bubble';
+import { Touchable } from '../Touchable';
+import { ImageChat } from './ImageChat';
+import { TextChat } from './TextChat';
+import { VideoChat } from './VideoChat';
+export const Chat = (props) => {
+    const chatRef = useRef(null);
+    let chatComponent;
+    if (props.variant === 'text') {
+        chatComponent = (_jsx(TextChat, { ...props, ref: chatRef }));
+    }
+    if (props.variant === 'image') {
+        chatComponent = (_jsx(ImageChat, { ...props, ref: chatRef }));
+    }
+    if (props.variant === 'video') {
+        chatComponent = (_jsx(VideoChat, { ...props, ref: chatRef }));
+    }
+    return (_jsx(Touchable, { onPress: () => {
+            if (chatRef.current?.onPress) {
+                chatRef.current?.onPress();
+            }
+        }, children: _jsx(Bubble, { positionType: props.positionType, ...chatRef.current?.bubbleProps, children: chatComponent }) }));
+};
+export * from './type';

package/lib/components/Chat/type.d.ts

@@ -0,0 +1,95 @@
+import type { DataSourceParam } from '@shopify/react-native-skia';
+import type { ReactNode } from 'react';
+import type { DimensionValue } from 'react-native';
+import type { ReactVideoSourceProperties } from 'react-native-video';
+import type { BubbleProps } from '../Bubble/type';
+import type { TextProps } from '../Text';
+/**
+ * Interface for MediaChatProps, which defines common properties for media-based chat components.
+ */
+export interface MediaChatProps {
+    /**
+     * Optional maximum width for the media content.
+     */
+    maxWidth?: DimensionValue;
+    /**
+     * Optional width for the media content.
+     */
+    width?: DimensionValue;
+    /**
+     * Optional height for the media content.
+     */
+    height?: DimensionValue;
+    /**
+     * Optional function to set media detail view.
+     * @param detail - React state action to update the media detail view.
+     */
+    setMediaDetail?: React.Dispatch<React.SetStateAction<ReactNode>>;
+}
+/**
+ * Union type for ChatProps, representing all possible chat component types.
+ * It can be either TextChatProps, ImageChatProps, or VideoChatProps.
+ */
+export type ChatProps = (TextChatProps | ImageChatProps | VideoChatProps);
+/**
+ * Interface for ChatRef, which defines the structure of the ref object for Chat components.
+ */
+export type ChatRef = {
+    /**
+     * Optional function to be called when the chat component is pressed.
+     */
+    onPress?: () => void;
+    /**
+     * Optional object containing bubble properties, excluding the 'positionType'.
+     * These properties can be applied to the Bubble component wrapping the chat content.
+     */
+    bubbleProps?: Omit<BubbleProps, 'positionType'>;
+};
+/**
+ * Interface for Text Chat properties.
+ * @extends Omit<TextProps, 'children' | 'style'> - Inherits from TextProps, excluding 'children' and 'style' properties.
+ * @extends Pick<BubbleProps, 'positionType'> - Includes the 'positionType' property from BubbleProps.
+ */
+export interface TextChatProps extends Omit<TextProps, 'children' | 'style'>, Pick<BubbleProps, 'positionType'> {
+    /** Specifies the variant of the chat component as 'text'. */
+    variant: 'text';
+    /** Optional ReactNode to be rendered as the content of the text chat. */
+    children?: ReactNode | undefined;
+    /**
+     * Optional function that returns an AsyncGenerator for streaming text content.
+     * @returns {AsyncGenerator<string, void, unknown>} An async generator that yields strings.
+     */
+    streamText?: () => AsyncGenerator<string, void, unknown>;
+}
+/**
+ * Interface for Image Chat properties.
+ * @extends MediaChatProps - Inherits properties for media handling.
+ * @extends Pick<BubbleProps, 'positionType'> - Includes the 'positionType' property from BubbleProps.
+ */
+export interface ImageChatProps extends MediaChatProps, Pick<BubbleProps, 'positionType'> {
+    /** Specifies the variant of the chat component as 'image'. */
+    variant: 'image';
+    /**
+     * Optional source for the image.
+     * Can be a URL string, a local file resource, or other valid image source.
+     */
+    source?: DataSourceParam;
+}
+/**
+ * Interface for Video Chat properties.
+ * @extends MediaChatProps - Inherits properties for media handling.
+ * @extends Pick<BubbleProps, 'positionType'> - Includes the 'positionType' property from BubbleProps.
+ */
+export interface VideoChatProps extends MediaChatProps, Pick<BubbleProps, 'positionType'> {
+    /** Specifies the variant of the chat component as 'video'. */
+    variant: 'video';
+    /**
+     * Source for the video content.
+     * It's a read-only object that includes all properties of ReactVideoSourceProperties except 'uri',
+     * and adds a potentially undefined 'uri' property that can be a string, NodeRequire, or undefined.
+     */
+    source: Readonly<Omit<ReactVideoSourceProperties, 'uri'> & {
+        uri?: string | NodeRequire | undefined;
+    }> | undefined;
+}
+//# sourceMappingURL=type.d.ts.map

package/lib/components/Chat/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAErE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAA;CACjE;AAED;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,CAAC,aAAa,GAAG,cAAc,GAAG,cAAc,CAAC,CAAC;AAE1E;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;CACjD,CAAA;AAED;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC;IAC7G,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;IAEhB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEjC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,cAAc,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;CAC1D;AAGD;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC;IACvF,8DAA8D;IAC9D,OAAO,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC;IACvF,8DAA8D;IAC9D,OAAO,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,0BAA0B,EAAE,KAAK,CAAC,GAAG;QACzD,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;KACxC,CAAC,GAAG,SAAS,CAAC;CAChB"}

package/lib/components/Chat/type.js

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

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

@@ -0,0 +1,4 @@
+import type { ChatClusterProps } from './types';
+export declare const ChatCluster: ({ chatItems, view, ...otherProps }: ChatClusterProps) => import("react/jsx-runtime").JSX.Element;
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChatCluster/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD,eAAO,MAAM,WAAW,uCAIrB,gBAAgB,4CA0ClB,CAAC;AAEF,cAAc,SAAS,CAAC"}

package/lib/components/ChatCluster/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@emotion/react';
+import { useCallback, useMemo, useState } from 'react';
+import { Box } from '../Box';
+import { calculateAlignment } from '../Bubble/utils';
+import { Chat } from '../Chat';
+import { List } from '../List';
+import { genBubblePositionStyle, scaledChatMedia } from './utils';
+export const ChatCluster = ({ chatItems, view = 'right', ...otherProps }) => {
+    const theme = useTheme();
+    const themeChat = useMemo(() => theme.__hd__.chat, [theme]);
+    const [widthValue, setWidthValue] = useState(0);
+    const onLayout = useCallback((event) => {
+        const { width } = event.nativeEvent.layout;
+        if (width !== widthValue) {
+            setWidthValue(width);
+        }
+    }, [widthValue]);
+    const alignSelf = calculateAlignment(view);
+    return (_jsx(Box, { width: themeChat.defaultClusterWidth, alignSelf: alignSelf, children: _jsx(Box, { onLayout: onLayout, width: "100%", children: _jsx(List, { data: chatItems, renderItem: ({ item, index }) => (_jsx(Box, { marginTop: index === 0 ? undefined : themeChat.defaultItemSeparatorSize, children: _jsx(Chat, { positionType: genBubblePositionStyle(view, index, chatItems.length), ...scaledChatMedia(item, widthValue), ...otherProps }, `chat_${index}`) })) }) }) }));
+};
+export * from './types';

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { ChatProps } from '../Chat';
+export interface ChatClusterProps {
+    /**
+     * List of items to display.
+     */
+    chatItems: ChatProps[];
+    view: 'right' | 'left';
+    setMediaDetail?: React.Dispatch<React.SetStateAction<ReactNode | undefined>>;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ChatCluster/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,SAAS,EAAE,SAAS,EAAE,CAAC;IAKvB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IAEvB,cAAc,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC;CAC9E"}

package/lib/components/ChatCluster/types.js

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

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

@@ -0,0 +1,5 @@
+import type { BubblePositionType } from '../Bubble/type';
+import type { ChatProps } from '../Chat';
+export declare const genBubblePositionStyle: (view: "right" | "left", index: number, len: number) => BubblePositionType;
+export declare const scaledChatMedia: (props: ChatProps, maxWidth: number) => ChatProps;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/ChatCluster/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,sBAAsB,SAC3B,OAAO,GAAG,MAAM,SACf,MAAM,OACR,MAAM,KACV,kBAQF,CAAC;AAEF,eAAO,MAAM,eAAe,UACnB,SAAS,YACN,MAAM,KACf,SAMF,CAAC"}

package/lib/components/ChatCluster/utils.js

@@ -0,0 +1,15 @@
+export const genBubblePositionStyle = (view, index, len) => {
+    if (len === 1) {
+        return view;
+    }
+    const isFirst = index === 0;
+    const isLast = index === len - 1;
+    const suffix = isFirst ? 'top' : (isLast ? 'bottom' : 'middle');
+    return `${view}-${suffix}`;
+};
+export const scaledChatMedia = (props, maxWidth) => {
+    if (props.variant === 'image' || props.variant === 'video') {
+        props.maxWidth = maxWidth;
+    }
+    return props;
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,IAAI,UAAW,SAAS,4CAuDpC,CAAC"}

package/lib/components/Chip/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTheme } from '../../theme';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { Touchable } from '../Touchable';
+export const Chip = (props) => {
+    const theme = useTheme();
+    const themeChip = useMemo(() => theme.__hd__.chip, [theme]);
+    const { text, size = themeChip.defaultSize, selected = themeChip.defaultSelected, onPress, icon, rightIcon, color = 'primary', } = props;
+    const chipType = useMemo(() => (selected ? 'selected' : 'unselected'), [selected]);
+    const textColor = selected ? 'white' : color;
+    const iconColor = selected ? 'white' : color;
+    return (_jsx(Touchable, { onPress: onPress, children: _jsxs(Box, { backgroundColor: themeChip.backgroundColors[chipType], borderWidth: themeChip.borderWidth, borderColor: themeChip.borderColor, borderRadius: themeChip.borderRadius, paddingVertical: themeChip.chipConfigs[size].paddingVertical, paddingHorizontal: themeChip.chipConfigs[size].paddingHorizontal, flex: 0, children: [icon && (_jsx(Box, { marginRight: "xsmall", children: _jsx(Icon, { icon: icon, color: iconColor, size: themeChip.chipConfigs[size].iconSize }) })), _jsx(Text, { fontSize: themeChip.chipConfigs[size].fontSize, fontWeight: themeChip.chipConfigs[size].fontWeight, color: textColor, children: text }), rightIcon && (_jsx(Box, { marginLeft: "xsmall", children: _jsx(Icon, { icon: rightIcon, color: iconColor, size: size }) }))] }) }));
+};

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

@@ -0,0 +1,50 @@
+import type { Color } from '../../theme';
+import type { IconName } from '../Icon';
+/**
+ * Props for the Chip component.
+ */
+export interface ChipProps {
+    /**
+     * The text content of the chip.
+     * This is the main label displayed on the chip.
+     * Required prop.
+     */
+    text: string;
+    /**
+     * The size of the chip.
+     * Determines the overall dimensions of the chip.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether the chip is selected or not.
+     * Affects the visual appearance of the chip.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Function to be called when the chip is pressed.
+     * Handles the interaction when the user taps on the chip.
+     * Optional callback.
+     */
+    onPress?: () => void;
+    /**
+     * Icon to be displayed on the left side of the chip text.
+     * Enhances visual representation of the chip.
+     * Uses IconName type for consistency.
+     */
+    icon?: IconName;
+    /**
+     * Icon to be displayed on the right side of the chip text.
+     * Can be used for additional visual information or actions.
+     * Uses IconName type for consistency.
+     */
+    rightIcon?: IconName;
+    /**
+     * The color theme of the chip.
+     * Determines the visual style and color scheme of the chip.
+     * @default 'primary'
+     */
+    color?: Color;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf"}

package/lib/components/Chip/types.js

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

package/lib/components/Divider/StyledDivider.d.ts

@@ -0,0 +1,12 @@
+import type { Color } from '../../theme';
+declare const StyledDivider: import("@emotion/native").StyledComponent<import("..").BoxProps & {
+    ref?: import("react").ForwardedRef<import("react-native").View>;
+} & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    orientation: "horizontal" | "vertical";
+    themeColor: Color | undefined;
+}, {}, {}>;
+export { StyledDivider };
+//# sourceMappingURL=StyledDivider.d.ts.map

package/lib/components/Divider/StyledDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDivider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/StyledDivider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,QAAA,MAAM,aAAa;;;;SAsBsoK,MAAO,WAAW;;iBArB7pK,YAAY,GAAG,UAAU;gBACzB,KAAK,GAAG,SAAS;UAiB7B,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/lib/components/Divider/StyledDivider.js

@@ -0,0 +1,17 @@
+import styled from '@emotion/native';
+import { Box } from '../Box';
+const StyledDivider = styled(Box)(({ theme, themeColor, orientation }) => {
+    const validThemeColor = themeColor && theme.colors[themeColor]
+        ? themeColor
+        : theme.__hd__.divider.colors.default;
+    return {
+        height: orientation === 'horizontal'
+            ? theme.__hd__.divider.borderWidths.default
+            : '100%',
+        width: orientation === 'vertical'
+            ? theme.__hd__.divider.borderWidths.default
+            : '100%',
+        backgroundColor: validThemeColor,
+    };
+});
+export { StyledDivider };

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

@@ -0,0 +1,15 @@
+import type { Color } from '../../theme';
+import { type BoxProps } from '../Box';
+interface DividerProps extends BoxProps {
+    /**
+     * The orientation of the divider. The default value is 'horizontal'.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The color of the divider. The default value is 'grey200'.
+     */
+    color?: Color;
+}
+export declare const Divider: ({ orientation, color, ...otherProps }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAI5C,UAAU,YAAa,SAAQ,QAAQ;IACrC;;OAEG;IACJ,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,eAAO,MAAM,OAAO,0CAIjB,YAAY,4CAId,CAAC"}

package/lib/components/Divider/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../Box';
+import { StyledDivider } from './StyledDivider';
+export const Divider = ({ orientation = 'horizontal', color, ...otherProps }) => (_jsx(Box, { ...otherProps, children: _jsx(StyledDivider, { orientation: orientation, themeColor: color }) }));

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

@@ -0,0 +1,25 @@
+/**
+ * FastList vs List Component Differences:
+ * 1. FastList uses Shopify's FlashList which offers better performance for long lists
+ *    compared to React Native's FlatList (used by List component).
+ * 2. contentContainerStyle in FastList only supports a limited set of style properties:
+ *    - backgroundColor
+ *    - padding, paddingTop, paddingBottom, paddingLeft, paddingRight
+ *    - paddingVertical, paddingHorizontal
+ *    Common layout properties like 'gap' are NOT supported.
+ *    For full style support, use the List component instead.
+ */
+import type { FlashListProps, ListRenderItem } from '@shopify/flash-list';
+import { FlashList } from '@shopify/flash-list';
+import { type ForwardedRef } from 'react';
+import { type ScrollableProps } from '../Scrollable';
+export interface FastListProps<T> extends Omit<ScrollableProps, 'children' | 'renderItem' | 'contentContainerStyle'>, Omit<FlashListProps<T>, 'children' | 'renderItem'> {
+    children?: ListRenderItem<T> | null | undefined;
+    renderItem?: ListRenderItem<T> | null | undefined;
+}
+declare function PlainFastList<T>({ style, contentContainerStyle, renderItem, children, ...otherProps }: FastListProps<T>, ref: ForwardedRef<FlashList<T>>): import("react/jsx-runtime").JSX.Element;
+export declare const FastList: <T>(props: FastListProps<T> & {
+    ref?: ForwardedRef<FlashList<T>>;
+}) => ReturnType<typeof PlainFastList>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FastList/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAc,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,aAAa,CAAC,CAAC,CAC9B,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,YAAY,GAAG,uBAAuB,CAAC,EAChF,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAKpD,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,aAAa,CAAC,CAAC,EACtB,EACE,KAAK,EACL,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,UAAU,EACd,EAAE,aAAa,CAAC,CAAC,CAAC,EACnB,GAAG,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,2CAiBhC;AAED,eAAO,MAAM,QAAQ,EAAgC,CAAC,CAAC,EACrD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC3D,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/lib/components/FastList/index.js

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

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

@@ -0,0 +1,40 @@
+import { type ListProps } from '../List';
+/**
+ * Represents an option in the Filter component.
+ * @template T The type of the value associated with the option.
+ */
+export interface FilterOption<T> {
+    /**
+     * The value associated with the option.
+     */
+    value: T;
+    /**
+     * The text to display for the option.
+     */
+    text: string;
+}
+/**
+ * Props for the Filter component.
+ * @template T The type of the values in the filter options.
+ */
+export interface FilterProps<T> extends Partial<ListProps<FilterOption<T>>> {
+    /**
+     * An array of filter options to display.
+     */
+    options: FilterOption<T>[];
+    /**
+     * An array of currently selected values.
+     */
+    selectedValues: T[];
+    /**
+     * Callback function called when the selection changes.
+     */
+    onSelectionChange: (selectedValues: T[]) => void;
+    /**
+     * Whether multiple selections are allowed.
+     * @default false
+     */
+    multiple?: boolean;
+}
+export declare function Filter<T>({ options, selectedValues, onSelectionChange, multiple, ...listProps }: FilterProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C;;;GAGG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACzE;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC;IACpB;;OAEG;IACH,iBAAiB,EAAE,CAAC,cAAc,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,OAAO,EACP,cAAc,EACd,iBAAiB,EACjB,QAAgB,EAChB,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CAwChB"}

package/lib/components/Filter/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import omit from 'lodash/fp/omit';
+import { useCallback, useMemo } from 'react';
+import { useTheme } from '../../theme';
+import { Box } from '../Box';
+import { Chip } from '../Chip';
+import { List } from '../List';
+export function Filter({ options, selectedValues, onSelectionChange, multiple = false, ...listProps }) {
+    const theme = useTheme();
+    const themeFilter = useMemo(() => theme.__hd__.filter, [theme]);
+    const handleChipPress = useCallback((value) => {
+        if (multiple) {
+            const newSelectedValues = selectedValues.includes(value)
+                ? selectedValues.filter((v) => v !== value)
+                : [...selectedValues, value];
+            onSelectionChange(newSelectedValues);
+        }
+        else {
+            onSelectionChange(selectedValues[0] === value ? [] : [value]);
+        }
+    }, [multiple, onSelectionChange, selectedValues]);
+    return (_jsx(List, { data: options, horizontal: true, justifyContent: "flex-start", alignItems: "center", showsHorizontalScrollIndicator: false, ...omit(['data', 'renderItem'], listProps), children: ({ item }) => (_jsx(Box, { marginRight: "small", children: _jsx(Chip, { text: item.text, selected: selectedValues.includes(item.value), onPress: () => handleChipPress(item.value), size: themeFilter.chipSize, color: themeFilter.chipColor }) })) }));
+}

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

@@ -0,0 +1,11 @@
+import { type LinearGradientProps } from 'react-native-linear-gradient';
+import { type GradientColor } from '../../theme';
+import { type BoxProps } from '../Box';
+export interface GradientProps extends BoxProps, Omit<LinearGradientProps, 'colors'> {
+    /**
+     * The colors of the linear gradient.
+     */
+    gradient: GradientColor;
+}
+export declare const Gradient: ({ gradient, children, ...otherProps }: GradientProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Gradient/index.tsx"],"names":[],"mappings":"AACA,OAAuB,EACrB,KAAK,mBAAmB,EACzB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,WAAW,aACf,SAAQ,QAAQ,EACd,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,0CAIlB,aAAa,4CAaf,CAAC"}

package/lib/components/Gradient/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import LinearGradient, {} from 'react-native-linear-gradient';
+import { useTheme } from '../../theme';
+import { Box } from '../Box';
+export const Gradient = ({ gradient, children, ...otherProps }) => {
+    const theme = useTheme();
+    const colors = useMemo(() => theme.gradientColors[gradient], [gradient, theme]);
+    return (_jsx(Box, { ...otherProps, children: _jsx(LinearGradient, { colors: colors, children: children }) }));
+};

package/lib/components/Header/BackButton.d.ts

@@ -0,0 +1,5 @@
+import type { HeaderProps } from './types';
+type BackButtonProps = HeaderProps['backButton'];
+export declare const BackButton: (props: BackButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=BackButton.d.ts.map

package/lib/components/Header/BackButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../src/components/Header/BackButton.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,KAAK,eAAe,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;AAEjD,eAAO,MAAM,UAAU,UAAW,eAAe,mDA2ChD,CAAC"}