@a-little-world/little-world-design-system-native 0.5.1

package/dist/components/Illustrations/Illustration.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IllustrationProps } from '@a-little-world/little-world-design-system-core';
+export declare const Illustration: ({ children, label, labelVisible, labelTop, }: IllustrationProps) => React.JSX.Element;

package/dist/components/Illustrations/createIllustrationComponent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { IllustrationProps, SvgFactoryOptions } from '@a-little-world/little-world-design-system-core';
+import { SvgProps } from 'react-native-svg';
+export declare const createIllustrationComponent: ({ name, svgData, }: SvgFactoryOptions) => {
+    ({ height, width, style, color, label, labelVisible, }: SvgProps & {
+        style?: ViewStyle | undefined;
+        color?: string | undefined;
+    } & IllustrationProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/Illustrations/index.d.ts

@@ -0,0 +1,134 @@
+/// <reference types="react" />
+export declare const BrokenChainImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ConfettiImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const FriendshipImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const GroupHandsImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const KeyImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const LivingRoomImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const LaptopWithPhoneImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ManOnRocketImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const MatchSearchingImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const PaperPlaneImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const PeopleTogetherImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const QuestionMarksImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const RaisingMoneyImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const TeacherImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const TimeFlexibleImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const UnmatchedImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const WavyBlockImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const WavyLinesImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const WomanOnRocketImage: {
+    ({ height, width, style, color, label, labelVisible, }: import("react-native-svg").SvgProps & {
+        style?: import("react-native").ViewStyle | undefined;
+        color?: string | undefined;
+    } & import("@a-little-world/little-world-design-system-core").IllustrationProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/InputError/InputError.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { InputErrorBaseProps } from '@a-little-world/little-world-design-system-core';
+export declare const INPUT_ERROR_CSS: import("styled-components/native/dist/types").RuleSet<object>;
+declare const InputError: React.FC<InputErrorBaseProps>;
+export default InputError;

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TextStyle, StyleProp } from 'react-native';
+export interface LabelProps {
+    style?: StyleProp<TextStyle>;
+    bold?: boolean;
+    children?: any;
+    nativeId?: string;
+    inline?: boolean;
+    marginBottom?: number;
+}
+export declare const Label: React.FC<LabelProps>;
+export default Label;

package/dist/components/Label/styles.d.ts

@@ -0,0 +1,9 @@
+import { TextStyle } from 'react-native';
+import { DefaultTheme } from 'styled-components/native';
+export declare const getLabelStyles: ({ theme, bold, inline, marginBottom, }: {
+    theme: DefaultTheme;
+    bold?: boolean | undefined;
+    children?: any;
+    inline?: boolean | undefined;
+    marginBottom?: number | undefined;
+}) => TextStyle;

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,17 @@
+import { LinkBaseProps } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+import { PressableProps, ViewStyle, StyleProp } from 'react-native';
+export type LinkProps = Omit<PressableProps, 'onPress'> & LinkBaseProps & {
+    params?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Link component for React Native
+ * - Uses React Navigation for internal navigation (to)
+ * - Uses Linking API for external links (href)
+ */
+declare const Link: React.ForwardRefExoticComponent<Omit<PressableProps, "onPress"> & LinkBaseProps & {
+    params?: Record<string, any> | undefined;
+    style?: StyleProp<ViewStyle>;
+} & React.RefAttributes<any>>;
+export default Link;

package/dist/components/Link/styles.d.ts

@@ -0,0 +1,12 @@
+import { ButtonAppearance } from '@a-little-world/little-world-design-system-core';
+import { DefaultTheme } from 'styled-components/native';
+import { ViewStyle, TextStyle } from 'react-native';
+export declare const getLinkStyles: ({ theme, }: {
+    theme: DefaultTheme;
+}) => ViewStyle;
+export declare const getLinkTextStyles: ({ theme, buttonAppearance, color, textDecoration, }: {
+    theme: DefaultTheme;
+    buttonAppearance?: ButtonAppearance | undefined;
+    color?: string | undefined;
+    textDecoration?: boolean | undefined;
+}) => TextStyle;

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LoadingBaseProps, LoadingSizes, LoadingType } from '@a-little-world/little-world-design-system-core';
+export { LoadingSizes, LoadingType };
+export declare const LOADING_RING_ID = "loadingRing";
+export declare const LOADING_LOGO_ID = "loadingLogo";
+interface LoadingProps extends LoadingBaseProps {
+    style?: any;
+}
+declare const Loading: React.FC<LoadingProps>;
+export default Loading;

package/dist/components/Loading/LoadingLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LoadingSizes } from '@a-little-world/little-world-design-system-core';
+export interface LoadingLogoProps {
+    size?: LoadingSizes;
+    label?: string;
+}
+declare const LoadingLogo: React.FC<LoadingLogoProps>;
+export default LoadingLogo;

package/dist/components/Loading/LoadingLogo.styles.d.ts

@@ -0,0 +1,4 @@
+import { ViewStyle } from 'react-native';
+export declare const getLoadingLogoStyles: (dimension: number) => {
+    container: ViewStyle;
+};

package/dist/components/Loading/styles.d.ts

@@ -0,0 +1,4 @@
+import { ViewStyle } from 'react-native';
+import { LoadingSizes, LoadingType } from '@a-little-world/little-world-design-system-core';
+export declare const getLoadingContainerStyles: (align?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', inline?: boolean, size?: LoadingSizes, type?: LoadingType) => ViewStyle;
+export declare const getLoadingElementStyles: (color?: string, size?: LoadingSizes) => ViewStyle;

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,12 @@
+import { PopoverSizes } from '@a-little-world/little-world-design-system-core';
+import * as PopoverPrimitive from '@rn-primitives/popover';
+import React from 'react';
+type PopoverProps = {
+    asToolTip?: boolean;
+    children: React.ReactNode;
+    showCloseButton?: boolean;
+    trigger?: React.ReactNode;
+    width?: PopoverSizes;
+} & PopoverPrimitive.RootProps & PopoverPrimitive.ContentProps;
+declare const Popover: React.FC<PopoverProps>;
+export default Popover;

package/dist/components/Popover/styles.d.ts

@@ -0,0 +1,51 @@
+import { PopoverSizes } from '@a-little-world/little-world-design-system-core';
+import { DefaultTheme } from 'styled-components/native';
+export declare const getPopoverContentStyles: ({ theme, width, extraPaddingTop, asToolTip, }: {
+    theme: DefaultTheme;
+    width?: number | undefined;
+    extraPaddingTop?: boolean | undefined;
+    asToolTip?: boolean | undefined;
+}) => {
+    content: {
+        paddingTop?: number | undefined;
+        display: "flex";
+        flexDirection: "column";
+        position: "absolute";
+        zIndex: number;
+        borderRadius: number;
+        padding: number;
+        width: number | undefined;
+        maxWidth: PopoverSizes;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        backgroundColor: string;
+        paddingRight: number;
+    };
+};
+export declare const getPopoverCloseStyles: ({ theme, asToolTip, }: {
+    theme: DefaultTheme;
+    asToolTip?: boolean | undefined;
+}) => {
+    close: {
+        position: "absolute";
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        color: string;
+    };
+};
+export declare const getPopoverArrowStyles: ({ theme, asToolTip, }: {
+    theme: DefaultTheme;
+    asToolTip?: boolean | undefined;
+}) => {
+    arrow: {
+        backgroundColor: string;
+    };
+};

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+import { ProgressBarBaseProps } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface ProgressBarProps extends ProgressBarBaseProps {
+    style?: StyleProp<ViewStyle>;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/components/ProgressBar/styles.d.ts

@@ -0,0 +1,24 @@
+import { DefaultTheme } from 'styled-components/native';
+export declare const getProgressBarStyles: ({ theme }: {
+    theme: DefaultTheme;
+}) => {
+    wrapper: {
+        flexDirection: "row";
+        alignItems: "center";
+        width: "100%";
+        gap: number;
+        display: "flex";
+    };
+    root: {
+        flex: number;
+        position: "relative";
+        overflow: "hidden";
+        borderRadius: number;
+        backgroundColor: string;
+        height: number;
+    };
+    indicator: {
+        backgroundColor: string;
+        height: "100%";
+    };
+};

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
+import React from 'react';
+type Props = {
+    error?: string;
+    label?: string;
+    labelTooltip?: string;
+    items: Array<{
+        id: string;
+        label?: string;
+        value: string;
+    }>;
+    inputRef: React.RefObject<HTMLInputElement>;
+} & RadioGroupPrimitive.RootProps;
+declare const RadioGroup: React.FC<Props>;
+export default RadioGroup;

package/dist/components/RadioGroup/styles.d.ts

@@ -0,0 +1,32 @@
+import { DefaultTheme } from 'styled-components/native';
+export declare const getRadioGroupStyles: ({ theme }: {
+    theme: DefaultTheme;
+}) => {
+    root: {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+        alignItems: "flex-start";
+    };
+    itemContainer: {
+        display: "flex";
+        alignItems: "center";
+    };
+    item: {
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: string;
+        width: number;
+        height: number;
+        marginRight: number;
+        boxShadow: string;
+    };
+    indicator: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        width: "100%";
+        height: "100%";
+    };
+};

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { SeparatorBaseProps } from '@a-little-world/little-world-design-system-core';
+interface SeparatorProps extends SeparatorBaseProps {
+    style?: StyleProp<ViewStyle>;
+}
+declare const Separator: ({ background, orientation, spacing, style, }: SeparatorProps) => React.JSX.Element;
+export default Separator;

package/dist/components/Separator/styles.d.ts

@@ -0,0 +1,22 @@
+import { DefaultTheme } from 'styled-components/native';
+export declare const getSeparatorStyles: ({ theme, background, spacing, }: {
+    theme: DefaultTheme;
+    background?: string | undefined;
+    spacing?: number | undefined;
+}) => {
+    wrapper: {
+        backgroundColor: string;
+        height: number;
+        width: "100%";
+    };
+    vertical: {
+        height: "100%";
+        width: number;
+        marginHorizontal: number;
+    };
+    horizontal: {
+        height: number;
+        width: "100%";
+        marginVertical: number;
+    };
+};

package/dist/components/Tags/Tags.d.ts

@@ -0,0 +1,11 @@
+import { TagBaseProps } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+export interface TagProps extends TagBaseProps {
+    style?: any;
+}
+export interface TagsProps extends TagProps {
+    content: string[];
+}
+export declare const Tag: React.FC<TagProps>;
+declare function Tags({ appearance, bold, color, content, size, style }: TagsProps): React.JSX.Element;
+export default Tags;

package/dist/components/Tags/styles.d.ts

@@ -0,0 +1,8 @@
+import { ViewStyle } from 'react-native';
+import { DefaultTheme } from 'styled-components/native';
+export declare const getTagStyles: ({ theme, size, appearance, color, }: {
+    theme: DefaultTheme;
+    size?: String | undefined;
+    appearance?: String | undefined;
+    color?: string | undefined;
+}) => ViewStyle;

package/dist/components/Text/BaseText.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TextStyle as RNTextStyle, StyleProp } from 'react-native';
+import { TextBaseProps } from '@a-little-world/little-world-design-system-core';
+export type BaseTextProps = TextBaseProps & {
+    italic?: boolean;
+    style?: StyleProp<RNTextStyle>;
+};
+declare const BaseText: ({ id, bold, center, children, color, italic, style, type, }: BaseTextProps) => React.JSX.Element;
+export default BaseText;

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BaseTextProps } from './BaseText';
+type TextProps = BaseTextProps & {
+    disableParser?: boolean;
+};
+declare const Text: ({ disableParser, children, ...baseTextProps }: TextProps) => React.JSX.Element;
+export default Text;

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,9 @@
+import { TextInputBaseProps } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+interface Props extends React.ComponentProps<typeof RNTextInput>, TextInputBaseProps {
+    inputRef?: React.RefObject<RNTextInput>;
+    type?: 'text' | 'password' | 'tel';
+}
+declare const TextInput: React.FC<Props>;
+export default TextInput;

package/dist/components/TextInput/styles.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View, TextInput as RNTextInput } from 'react-native';
+import { InputHeight, InputWidth } from '@a-little-world/little-world-design-system-core';
+export declare const createStyles: (theme: any) => {
+    inputWrapper: {
+        display: "flex";
+        flexDirection: "column";
+        width: "100%";
+        maxWidth: InputWidth;
+    };
+    inputContainer: {
+        position: "relative";
+        width: "100%";
+    };
+    input: {
+        width: "100%";
+        borderWidth: number;
+        borderColor: any;
+        borderRadius: number;
+        padding: any;
+        marginBottom: any;
+        fontSize: number;
+        lineHeight: number;
+    };
+    inputSmall: {
+        padding: number;
+    };
+    inputError: {
+        borderColor: any;
+    };
+    showPasswordToggle: {
+        position: "absolute";
+        right: any;
+        top: any;
+    };
+};
+export declare const InputWrapper: ({ children, width, style, }: {
+    children: React.ReactNode;
+    width?: InputWidth | undefined;
+    style?: any;
+}) => React.JSX.Element;
+export declare const InputContainer: ({ children, style, }: {
+    children: React.ReactNode;
+    style?: any;
+}) => React.JSX.Element;
+export declare const Input: ({ hasError, height, style, ...props }: {
+    hasError?: boolean | undefined;
+    height?: InputHeight | undefined;
+    style?: any;
+} & import("react-native").TextInputProps) => React.JSX.Element;
+export declare const ShowPasswordToggle: ({ children, style, ...props }: {
+    children: React.ReactNode;
+    style?: any;
+} & import("react-native").ViewProps) => React.JSX.Element;

package/dist/components/ToolTip/ToolTip.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type PopoverProps = {
+    side?: 'top' | 'bottom';
+    sideOffset?: number;
+};
+type PopoverContentProps = {};
+type Props = {
+    text: string;
+    trigger?: React.ReactNode;
+} & PopoverProps & PopoverContentProps;
+declare const ToolTip: React.FC<Props>;
+export default ToolTip;

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+export { default as Accordion } from './components/Accordion/Accordion';
+export { default as Button } from './components/Button/Button';
+export { default as Card, CardHeader, CardContent, CardFooter, } from './components/Card/Card';
+export { default as Checkbox } from './components/Checkbox/Checkbox';
+export { default as Dropdown } from './components/Dropdown/Dropdown';
+export { default as Gradient } from './components/Gradient/Gradient';
+export * from './components/Icon';
+export * from './components/Illustrations';
+export { default as Label } from './components/Label/Label';
+export type { LabelProps } from './components/Label/Label';
+export { default as Link } from './components/Link/Link';
+export { default as Loading, LoadingSizes, LoadingType, } from './components/Loading/Loading';
+export { default as LoadingLogo } from './components/Loading/LoadingLogo';
+export type { LoadingLogoProps } from './components/Loading/LoadingLogo';
+export { default as Popover } from './components/Popover/Popover';
+export { default as ProgressBar } from './components/ProgressBar/ProgressBar';
+export { default as RadioGroup } from './components/RadioGroup/RadioGroup';
+export { default as Separator } from './components/Separator/Separator';
+export { default as Tags, Tag } from './components/Tags/Tags';
+export type { TagProps, TagsProps } from './components/Tags/Tags';
+export { default as Text } from './components/Text/Text';
+export { default as TextInput } from './components/TextInput/TextInput';
+export { default as ToolTip } from './components/ToolTip/ToolTip';
+export * from './theme';
+export * from './types';