@sincpro/mobile-ui 0.1.2 → 0.1.3

package/lib/Dialog/Confirmation.context.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+type ConfirmationVariant = "dialog" | "bottomSheet";
+interface IConfirmationOptions {
+    variant?: ConfirmationVariant;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void | Promise<void>;
+    render?: (close: () => void) => ReactNode;
+}
+type ConfirmationContextValue = {
+    show: (opts: IConfirmationOptions) => void;
+    hide: () => void;
+};
+export declare function ConfirmationProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useConfirmationContext(): ConfirmationContextValue;
+export {};

package/lib/Dialog/Confirmation.context.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BottomSheet } from "../Dialog/BottomSheet";
+import ConfirmationDialog from "../Dialog/Dialog.Confirmation";
+import { BaseButton } from "../primitives/BaseButton";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+const DEFAULT_STATE = {
+    isVisible: false,
+    variant: "dialog",
+    title: "Confirmación",
+    message: "¿Estás seguro de que quieres continuar?",
+    confirmText: "Confirmar",
+    cancelText: "Cancelar",
+    onConfirm: undefined,
+    onCancel: undefined,
+    render: undefined,
+};
+const ConfirmationContext = createContext(null);
+export function ConfirmationProvider({ children }) {
+    const [state, setState] = useState(DEFAULT_STATE);
+    const show = useCallback((opts) => {
+        setState((prev) => ({
+            ...prev,
+            isVisible: true,
+            variant: opts.variant ?? DEFAULT_STATE.variant,
+            title: opts.title ?? DEFAULT_STATE.title,
+            message: opts.message ?? DEFAULT_STATE.message,
+            confirmText: opts.confirmText ?? DEFAULT_STATE.confirmText,
+            cancelText: opts.cancelText ?? DEFAULT_STATE.cancelText,
+            onConfirm: opts.onConfirm,
+            onCancel: opts.onCancel,
+            render: opts.render,
+        }));
+    }, []);
+    const hide = useCallback(() => {
+        setState(DEFAULT_STATE);
+    }, []);
+    const value = useMemo(() => ({ show, hide }), [show, hide]);
+    const handleConfirm = async () => {
+        try {
+            await state.onConfirm?.();
+        }
+        finally {
+            hide();
+        }
+    };
+    const handleCancel = async () => {
+        try {
+            await state.onCancel?.();
+        }
+        finally {
+            hide();
+        }
+    };
+    return (_jsxs(ConfirmationContext.Provider, { value: value, children: [children, state.variant === "dialog" && (_jsx(ConfirmationDialog, { auxTitle: state.title, cancelButtonText: state.cancelText, confirmButtonText: state.confirmText, onCancel: handleCancel, onConfirm: handleConfirm, subtitle: state.message, visible: state.isVisible })), state.variant === "bottomSheet" && (_jsx(BottomSheet.Root, { onClose: handleCancel, visible: state.isVisible, children: state.render ? (state.render(hide)) : (_jsxs(_Fragment, { children: [_jsx(BottomSheet.Header, { children: _jsx(BottomSheet.Title, { subtitle: state.message, children: state.title }) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", children: [_jsx(BaseButton, { className: "flex-1", onPress: handleCancel, title: state.cancelText ?? "", variant: "outline" }), _jsx(BaseButton, { className: "flex-1", onPress: handleConfirm, title: state.confirmText ?? "", variant: "primary" })] })] })) }))] }));
+}
+export function useConfirmationContext() {
+    const context = useContext(ConfirmationContext);
+    if (!context) {
+        // Return no-op functions during initial mount to avoid timing issues
+        console.warn("useConfirmationContext called before ConfirmationProvider mounted");
+        return {
+            show: () => { },
+            hide: () => { },
+        };
+    }
+    return context;
+}

package/lib/Dialog/Dialog.Confirmation.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface Props {
+    auxTitle?: string;
+    subtitle?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    visible: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+}
+declare const ConfirmationDialog: React.FC<Props>;
+export default ConfirmationDialog;

package/lib/Dialog/Dialog.Confirmation.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseButton } from "../primitives/BaseButton";
+import { theme } from "../theme";
+import Typography from "../Typography/Typography.Text";
+import { Modal, TouchableWithoutFeedback, View } from "react-native";
+const ConfirmationDialog = ({ visible, onCancel, onConfirm, auxTitle = "cambios", subtitle = "¿Estás seguro de que quieres descartar los cambios realizados?", confirmButtonText = "Sí", cancelButtonText = "No, continuar aquí", }) => {
+    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, transparent: true, visible: visible, children: _jsx(TouchableWithoutFeedback, { onPress: onCancel, children: _jsx(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: "rounded-xl p-3 w-full max-w-xs mx-auto", style: { backgroundColor: theme.bg.popover, ...theme.shadow.md }, children: [_jsx(Typography, { className: "mb-1.5 text-sm", variant: "body", children: _jsx(Typography, { semibold: true, variant: "body", children: auxTitle }) }), _jsx(Typography, { className: "mb-3 text-xs leading-tight", variant: "body", children: subtitle }), _jsxs(View, { className: "flex-row gap-2", children: [_jsx(BaseButton, { className: "flex-1", onPress: onCancel, size: "small", title: cancelButtonText, variant: "outlineBlack" }), _jsx(BaseButton, { className: "flex-1", onPress: onConfirm, size: "small", title: confirmButtonText, variant: "primary" })] })] }) }) }) }) }));
+};
+export default ConfirmationDialog;

package/lib/Dialog/Dialog.EditValue.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface EditableValueModalChip {
+    key?: string;
+    label: string;
+    onPress: () => void;
+}
+export interface EditableValueModalProps {
+    visible: boolean;
+    title: string;
+    value: string;
+    onChangeValue: (text: string) => void;
+    onConfirm: () => void;
+    onCancel: () => void;
+    placeholder?: string;
+    helperText?: string | React.ReactNode;
+    chips?: EditableValueModalChip[];
+    keyboardType?: "default" | "numeric" | "decimal-pad";
+    rightAdornment?: React.ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    autoFocus?: boolean;
+    testID?: string;
+}
+declare function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, onCancel, placeholder, helperText, chips, keyboardType, rightAdornment, confirmLabel, cancelLabel, autoFocus, testID, }: EditableValueModalProps): import("react/jsx-runtime").JSX.Element;
+export default EditableValueModal;

package/lib/Dialog/Dialog.EditValue.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { useEffect, useRef } from "react";
+import { FlatList, Modal, TextInput, TouchableOpacity, View } from "react-native";
+function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, onCancel, placeholder, helperText, chips, keyboardType = "decimal-pad", rightAdornment, confirmLabel = "Aplicar", cancelLabel = "Cancelar", autoFocus = true, testID, }) {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (visible && autoFocus) {
+            const t = setTimeout(() => inputRef.current?.focus(), 60);
+            return () => clearTimeout(t);
+        }
+    }, [visible, autoFocus]);
+    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, transparent: true, visible: visible, children: _jsx(View, { className: "flex-1 justify-center p-6 bg-black/40", children: _jsxs(View, { className: "rounded-xl p-4", style: { backgroundColor: theme.bg.popover, ...theme.shadow.md }, testID: testID, children: [_jsx(Typography.Text, { className: "mb-3", semibold: true, variant: "h6", children: title }), _jsxs(View, { className: "flex-row items-center", children: [_jsx(TextInput, { className: "flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary", keyboardType: keyboardType, onChangeText: onChangeValue, onSubmitEditing: onConfirm, placeholder: placeholder, ref: inputRef, returnKeyType: "done", value: value }), rightAdornment && _jsx(View, { className: "ml-2", children: rightAdornment })] }), helperText ? (_jsx(View, { className: "mt-2", children: typeof helperText === "string" ? (_jsx(Typography.Text, { className: "opacity-70", variant: "bodySmall", children: helperText })) : (helperText) })) : null, chips && chips.length > 0 && (_jsx(FlatList, { contentContainerClassName: "gap-2 py-3", data: chips, horizontal: true, keyExtractor: (c, i) => c.key || `${c.label}-${i}`, renderItem: ({ item }) => (_jsx(TouchableOpacity, { className: "px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30", onPress: item.onPress, children: _jsx(Typography.Text, { semibold: true, variant: "bodySmall", children: item.label }) })) })), _jsxs(View, { className: "flex-row justify-end gap-3", children: [_jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-bg-hover", onPress: onCancel, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: cancelLabel }) }), _jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-accent", onPress: onConfirm, children: _jsx(Typography.Text, { className: "text-text-inverse", semibold: true, variant: "body", children: confirmLabel }) })] })] }) }) }));
+}
+export default EditableValueModal;

package/lib/Dialog/index.d.ts

@@ -0,0 +1,19 @@
+import { BottomSheet } from "../Dialog/BottomSheet";
+import { ConfirmationProvider, useConfirmationContext } from "../Dialog/Confirmation.context";
+import EditValue, { type EditableValueModalChip, type EditableValueModalProps } from "../Dialog/Dialog.EditValue";
+export declare const Dialog: {
+    Confirmation: import("react").FC<import("../Dialog/Dialog.Confirmation").Props>;
+    BottomSheet: {
+        Root: ({ visible, onClose, size, dismissible, children }: import("./BottomSheet/BottomSheet.Root").RootProps) => import("react/jsx-runtime").JSX.Element;
+        Handle: ({ children }: import("./BottomSheet/BottomSheet.Root").HandleProps) => import("react/jsx-runtime").JSX.Element;
+        Header: ({ children }: import("./BottomSheet/BottomSheet.Root").HeaderProps) => import("react/jsx-runtime").JSX.Element;
+        Title: ({ children, subtitle }: import("./BottomSheet/BottomSheet.Root").TitleProps) => import("react/jsx-runtime").JSX.Element;
+        Content: ({ children, scrollable }: import("./BottomSheet/BottomSheet.Root").ContentProps) => import("react/jsx-runtime").JSX.Element;
+        Actions: ({ children, layout }: import("./BottomSheet/BottomSheet.Root").ActionsProps) => import("react/jsx-runtime").JSX.Element;
+        Footer: ({ children }: import("./BottomSheet/BottomSheet.Root").FooterProps) => import("react/jsx-runtime").JSX.Element;
+        useBottomSheet: () => import("./BottomSheet/BottomSheet.Root").BottomSheetContextValue;
+    };
+    EditValue: typeof EditValue;
+};
+export { BottomSheet, ConfirmationProvider, type EditableValueModalChip, type EditableValueModalProps, useConfirmationContext, };
+export default Dialog;

package/lib/Dialog/index.js

@@ -0,0 +1,11 @@
+import { BottomSheet } from "../Dialog/BottomSheet";
+import { ConfirmationProvider, useConfirmationContext, } from "../Dialog/Confirmation.context";
+import Confirmation from "../Dialog/Dialog.Confirmation";
+import EditValue from "../Dialog/Dialog.EditValue";
+export const Dialog = {
+    Confirmation,
+    BottomSheet,
+    EditValue,
+};
+export { BottomSheet, ConfirmationProvider, useConfirmationContext, };
+export default Dialog;

package/lib/Display/Display.Avatar.d.ts

@@ -0,0 +1,52 @@
+import { type VariantProps } from "../theme/tw";
+import { FC } from "react";
+declare const avatar: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    colorScheme: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, "justify-center items-center rounded-full shadow-sm", {
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    colorScheme: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    colorScheme: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, "justify-center items-center rounded-full shadow-sm", unknown, unknown, undefined>>;
+export interface AvatarProps extends Omit<VariantProps<typeof avatar>, "size"> {
+    initials: string;
+    size?: number;
+    className?: string;
+}
+declare const Avatar: FC<AvatarProps>;
+export default Avatar;

package/lib/Display/Display.Avatar.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+const avatar = tv({
+    base: "justify-center items-center rounded-full shadow-sm",
+    variants: {
+        size: {
+            small: "w-8 h-8",
+            medium: "w-10 h-10",
+            large: "w-12 h-12",
+            xlarge: "w-16 h-16",
+        },
+        colorScheme: {
+            default: "bg-bg-hover",
+            primary: "bg-primary/20",
+            secondary: "bg-secondary/20",
+            success: "bg-success-light",
+            warning: "bg-warning-light",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        colorScheme: "default",
+    },
+});
+const Avatar = ({ initials, size, colorScheme = "default", className }) => {
+    // Map size prop to Tailwind text classes
+    const getTextSize = () => {
+        if (size && size <= 32)
+            return "text-xs";
+        if (size && size <= 40)
+            return "text-sm";
+        if (size && size <= 48)
+            return "text-base";
+        return "text-lg";
+    };
+    return (_jsx(View, { className: cn(avatar({ colorScheme }), className), style: size ? { width: size, height: size } : undefined, children: _jsx(Typography.Text, { className: cn("text-text-primary font-semibold", getTextSize()), variant: "body", children: initials }) }));
+};
+export default Avatar;

package/lib/Display/Display.Badge.d.ts

@@ -0,0 +1,108 @@
+import { type VariantProps } from "../theme/tw";
+declare const badge: import("tailwind-variants").TVReturnType<{
+    variant: {
+        info: {
+            root: string;
+            text: string;
+        };
+        infoDark: {
+            root: string;
+            text: string;
+        };
+        warning: {
+            root: string;
+            text: string;
+        };
+        success: {
+            root: string;
+            text: string;
+        };
+        successDark: {
+            root: string;
+            text: string;
+        };
+        danger: {
+            root: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    text: string;
+}, undefined, {
+    variant: {
+        info: {
+            root: string;
+            text: string;
+        };
+        infoDark: {
+            root: string;
+            text: string;
+        };
+        warning: {
+            root: string;
+            text: string;
+        };
+        success: {
+            root: string;
+            text: string;
+        };
+        successDark: {
+            root: string;
+            text: string;
+        };
+        danger: {
+            root: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    text: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        info: {
+            root: string;
+            text: string;
+        };
+        infoDark: {
+            root: string;
+            text: string;
+        };
+        warning: {
+            root: string;
+            text: string;
+        };
+        success: {
+            root: string;
+            text: string;
+        };
+        successDark: {
+            root: string;
+            text: string;
+        };
+        danger: {
+            root: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    text: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BadgeVariant = VariantProps<typeof badge>["variant"];
+export declare enum BadgeVariants {
+    INFO = "info",
+    WARNING = "warning",
+    SUCCESS = "success",
+    INFO_DARK = "infoDark",
+    DANGER = "danger",
+    SUCCESS_DARK = "successDark"
+}
+export type BadgeProps = {
+    label: string;
+    variant: BadgeVariants | BadgeVariant | string;
+    className?: string;
+};
+declare function Badge({ label, variant, className }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/lib/Display/Display.Badge.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "../theme/tw";
+import { Text, View } from "react-native";
+const badge = tv({
+    slots: {
+        root: "px-2.5 py-1.5 rounded-lg self-start",
+        text: "text-xs font-semibold",
+    },
+    variants: {
+        variant: {
+            info: {
+                root: "bg-info-light",
+                text: "text-info",
+            },
+            infoDark: {
+                root: "bg-info",
+                text: "text-text-on-primary",
+            },
+            warning: {
+                root: "bg-warning-light",
+                text: "text-warning",
+            },
+            success: {
+                root: "bg-success-light",
+                text: "text-success",
+            },
+            successDark: {
+                root: "bg-success",
+                text: "text-text-on-primary",
+            },
+            danger: {
+                root: "bg-danger-light",
+                text: "text-danger",
+            },
+        },
+    },
+    defaultVariants: {
+        variant: "info",
+    },
+});
+export var BadgeVariants;
+(function (BadgeVariants) {
+    BadgeVariants["INFO"] = "info";
+    BadgeVariants["WARNING"] = "warning";
+    BadgeVariants["SUCCESS"] = "success";
+    BadgeVariants["INFO_DARK"] = "infoDark";
+    BadgeVariants["DANGER"] = "danger";
+    BadgeVariants["SUCCESS_DARK"] = "successDark";
+})(BadgeVariants || (BadgeVariants = {}));
+function Badge({ label, variant, className }) {
+    const styles = badge({ variant: variant });
+    return (_jsx(View, { className: styles.root({ className }), children: _jsx(Text, { className: styles.text(), numberOfLines: 1, children: label }) }));
+}
+export default Badge;

package/lib/Display/Display.CopyableText.d.ts

@@ -0,0 +1,13 @@
+type CopyableTextProps = {
+    value: string;
+    getValue?: never;
+    label?: string;
+    className?: string;
+} | {
+    value?: never;
+    getValue: () => string;
+    label?: string;
+    className?: string;
+};
+declare function CopyableText({ value, getValue, label, className }: CopyableTextProps): import("react/jsx-runtime").JSX.Element;
+export default CopyableText;

package/lib/Display/Display.CopyableText.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "../Typography";
+import * as Clipboard from "expo-clipboard";
+import { TouchableOpacity } from "react-native";
+function CopyableText({ value, getValue, label, className }) {
+    const hasStaticValue = value !== undefined;
+    const displayText = label || value;
+    const handleCopy = async () => {
+        const textToCopy = hasStaticValue ? value : getValue();
+        await Clipboard.setStringAsync(textToCopy);
+    };
+    return (_jsx(TouchableOpacity, { onPress: handleCopy, children: _jsx(Typography.Text, { className: className || "text-primary", semibold: true, variant: "bodySmall", children: displayText }) }));
+}
+export default CopyableText;

package/lib/Display/Display.CountRecords.d.ts

@@ -0,0 +1,8 @@
+interface IProps {
+    name?: string;
+    count: number;
+    withPadding?: boolean;
+    className?: string;
+}
+declare function CountRecords({ name, count, withPadding, className }: IProps): import("react/jsx-runtime").JSX.Element;
+export default CountRecords;

package/lib/Display/Display.CountRecords.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+function CountRecords({ name, count, withPadding = true, className }) {
+    return (_jsxs(View, { className: cn("flex-row py-2", withPadding && "px-4", className), children: [_jsxs(Typography.Text, { semibold: true, variant: "bodySmall", children: ["Total ", " ", `${name || "Registros"} `] }), _jsxs(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: ["( ", count, " )"] })] }));
+}
+export default CountRecords;

package/lib/Display/Display.Date.d.ts

@@ -0,0 +1,18 @@
+import { typographyVariants } from "../theme/typography";
+import type { StyleProp, TextStyle } from "react-native";
+type DateFormat = "short" | "long" | "numeric";
+interface DateFieldProps {
+    value: string | Date | null | undefined;
+    format?: DateFormat;
+    prefix?: string;
+    textVariant?: keyof typeof typographyVariants;
+    color?: string;
+    style?: StyleProp<TextStyle>;
+    semibold?: boolean;
+    bold?: boolean;
+    className?: string;
+    showTime?: boolean;
+    timezone?: string;
+}
+declare function DateField({ value, format, prefix, textVariant, color, style, semibold, bold, className, showTime, timezone, }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+export default DateField;

package/lib/Display/Display.Date.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "../Typography";
+import { formatDate } from "../utils/date";
+function DateField({ value, format = "short", prefix = "", textVariant = "body", color, style = {}, semibold = false, bold = false, className, showTime = true, timezone, }) {
+    const locale = "es-CR";
+    const formatted = value
+        ? formatDate(value, timezone, {
+            showTime,
+            locale,
+        })
+        : "-";
+    return (_jsx(Typography.Text, { bold: bold, className: className, color: color, semibold: semibold && !bold, style: style, variant: textVariant, children: prefix ? `${prefix}${formatted}` : formatted }));
+}
+export default DateField;

package/lib/Display/Display.Divider.d.ts

@@ -0,0 +1,44 @@
+import { type VariantProps } from "../theme/tw";
+declare const divider: import("tailwind-variants").TVReturnType<{
+    spacing: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    colorScheme: {
+        light: string;
+        default: string;
+        dark: string;
+    };
+}, undefined, "w-full bg-border-divider", {
+    spacing: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    colorScheme: {
+        light: string;
+        default: string;
+        dark: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    spacing: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    colorScheme: {
+        light: string;
+        default: string;
+        dark: string;
+    };
+}, undefined, "w-full bg-border-divider", unknown, unknown, undefined>>;
+interface DividerProps extends VariantProps<typeof divider> {
+    thickness?: number;
+    className?: string;
+}
+declare function Divider({ thickness, spacing, colorScheme, className }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export default Divider;

package/lib/Display/Display.Divider.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "../theme/tw";
+import { View } from "react-native";
+const divider = tv({
+    base: "w-full bg-border-divider",
+    variants: {
+        spacing: {
+            none: "my-0",
+            sm: "my-1",
+            md: "my-2",
+            lg: "my-3",
+        },
+        colorScheme: {
+            light: "bg-border-divider opacity-50",
+            default: "bg-border-divider",
+            dark: "bg-border-divider opacity-100",
+        },
+    },
+    defaultVariants: {
+        spacing: "md",
+        colorScheme: "default",
+    },
+});
+function Divider({ thickness = 1, spacing, colorScheme, className }) {
+    return (_jsx(View, { className: cn(divider({ spacing, colorScheme }), className), style: { height: thickness } }));
+}
+export default Divider;

package/lib/Display/Display.Icon.d.ts

@@ -0,0 +1,15 @@
+import { IconType } from "../utils/icon";
+import { ComponentType, FC } from "react";
+export interface IconProps {
+    name?: any;
+    size?: number;
+    color?: string;
+    type?: IconType;
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    className?: string;
+}
+declare const Icon: FC<IconProps>;
+export default Icon;

package/lib/Display/Display.Icon.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AntDesign, Feather, FontAwesome, FontAwesome5, Ionicons, MaterialCommunityIcons, MaterialIcons, SimpleLineIcons, } from "@expo/vector-icons";
+import { theme } from "../theme";
+import { View } from "react-native";
+const Icon = ({ name, size = 24, color, type = "ionicons", customIcon, className, }) => {
+    const iconColor = color || theme.text.primary;
+    const renderIcon = () => {
+        if (type === "custom" && customIcon) {
+            const CustomIconComponent = customIcon;
+            return _jsx(CustomIconComponent, { color: iconColor, size: size });
+        }
+        switch (type) {
+            case "ionicons":
+                return _jsx(Ionicons, { color: iconColor, name: name, size: size });
+            case "fontawesome":
+                return _jsx(FontAwesome, { color: iconColor, name: name, size: size });
+            case "material":
+                return _jsx(MaterialIcons, { color: iconColor, name: name, size: size });
+            case "fontawesome5":
+                return _jsx(FontAwesome5, { color: iconColor, name: name, size: size });
+            case "simplelineicons":
+                return _jsx(SimpleLineIcons, { color: iconColor, name: name, size: size });
+            case "antdesign":
+                return _jsx(AntDesign, { color: iconColor, name: name, size: size });
+            case "feather":
+                return _jsx(Feather, { color: iconColor, name: name, size: size });
+            case "MaterialCommunityIcons":
+                return _jsx(MaterialCommunityIcons, { color: iconColor, name: name, size: size });
+            default:
+                return null;
+        }
+    };
+    return (_jsx(View, { className: `justify-center items-center ${className || ""}`, children: renderIcon() }));
+};
+export default Icon;