@sincpro/mobile-ui 0.1.2 → 0.1.3

package/lib/views/Wizard/Wizard.context.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorBoundary } from "../../Feedback";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+const WizardContext = createContext(null);
+export function WizardProvider({ children, initialStep, steps = [], onComplete, onCancel, isLoading = false, loadingMessage, }) {
+    const [currentStep, setCurrentStep] = useState(initialStep);
+    const [stepHistory, setStepHistory] = useState([initialStep]);
+    const goToStep = useCallback((step) => {
+        setStepHistory((prev) => [...prev, step]);
+        setCurrentStep(step);
+    }, []);
+    const back = useCallback(() => {
+        setStepHistory((prev) => {
+            if (prev.length <= 1)
+                return prev;
+            const newHistory = prev.slice(0, -1);
+            const previousStep = newHistory[newHistory.length - 1];
+            setCurrentStep(previousStep);
+            return newHistory;
+        });
+    }, []);
+    const next = useCallback(() => {
+        if (steps.length === 0)
+            return;
+        const currentIndex = steps.indexOf(currentStep);
+        if (currentIndex === -1 || currentIndex === steps.length - 1) {
+            onComplete?.();
+            return;
+        }
+        const nextStep = steps[currentIndex + 1];
+        goToStep(nextStep);
+    }, [currentStep, steps, goToStep, onComplete]);
+    const reset = useCallback((step) => {
+        const targetStep = step ?? initialStep;
+        setCurrentStep(targetStep);
+        setStepHistory([targetStep]);
+    }, [initialStep]);
+    const canGoBack = useMemo(() => stepHistory.length > 1, [stepHistory.length]);
+    const canGoNext = useMemo(() => {
+        if (steps.length === 0)
+            return false;
+        const currentIndex = steps.indexOf(currentStep);
+        return currentIndex !== -1 && currentIndex < steps.length - 1;
+    }, [currentStep, steps]);
+    const currentStepIndex = useMemo(() => {
+        if (steps.length === 0)
+            return 0;
+        return steps.indexOf(currentStep);
+    }, [currentStep, steps]);
+    const progress = useMemo(() => {
+        if (steps.length === 0)
+            return 0;
+        return ((currentStepIndex + 1) / steps.length) * 100;
+    }, [currentStepIndex, steps.length]);
+    const value = useMemo(() => ({
+        currentStep,
+        stepHistory,
+        goToStep,
+        back,
+        next,
+        reset,
+        canGoBack,
+        canGoNext,
+        totalSteps: steps.length,
+        currentStepIndex,
+        progress,
+    }), [
+        currentStep,
+        stepHistory,
+        goToStep,
+        back,
+        next,
+        reset,
+        canGoBack,
+        canGoNext,
+        steps.length,
+        currentStepIndex,
+        progress,
+    ]);
+    if (isLoading) {
+        return (_jsx(ErrorBoundary, { children: _jsxs(View, { className: "flex-1", children: [_jsx(WizardContext.Provider, { value: value, children: children }), _jsx(View, { className: "absolute inset-0 bg-black/50 justify-center items-center", children: _jsxs(View, { className: "bg-bg-card rounded-xl p-6 min-w-[200px] items-center shadow-lg", children: [_jsx(ActivityIndicator, { className: "text-warning", size: "large" }), loadingMessage && (_jsx(Text, { className: "mt-4 text-base text-text-primary text-center", children: loadingMessage }))] }) })] }) }));
+    }
+    return (_jsx(ErrorBoundary, { children: _jsx(WizardContext.Provider, { value: value, children: children }) }));
+}
+export function useWizard() {
+    const context = useContext(WizardContext);
+    if (!context) {
+        throw new Error("useWizard must be used within WizardProvider");
+    }
+    return context;
+}

package/lib/views/Wizard/Wizard.d.ts

@@ -0,0 +1,33 @@
+import type { WizardContextValue, WizardProviderProps, WizardStepId } from "../../views/Wizard/Wizard.context";
+import type { FC, ReactNode } from "react";
+export interface WizardStepGuard {
+    canEnter?: () => boolean | Promise<boolean>;
+    onEnterFailed?: () => void;
+}
+export interface WizardStepLifecycle {
+    onEnter?: () => void | Promise<void>;
+    onExit?: () => void | Promise<void>;
+}
+export interface WizardStepProps extends WizardStepGuard, WizardStepLifecycle {
+    name: WizardStepId;
+    children: ReactNode | ((context: WizardContextValue) => ReactNode);
+}
+export interface WizardGuardProps extends WizardStepGuard {
+    children: ReactNode;
+}
+export interface WizardGoProps {
+    step: WizardStepId;
+    children: ReactNode;
+    onPress?: () => void;
+}
+export interface WizardBackProps {
+    children?: ReactNode;
+    onPress?: () => void;
+}
+export declare const Wizard: {
+    Root: FC<WizardProviderProps>;
+    Step: FC<WizardStepProps>;
+    Guard: FC<WizardGuardProps>;
+    Go: FC<WizardGoProps>;
+    Back: FC<WizardBackProps>;
+};

package/lib/views/Wizard/Wizard.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useWizard, WizardProvider } from "../../views/Wizard/Wizard.context";
+import { useEffect } from "react";
+import { TouchableOpacity } from "react-native";
+const WizardRoot = (props) => {
+    return _jsx(WizardProvider, { ...props });
+};
+const WizardStep = ({ name, children, canEnter, onEnterFailed, onEnter, onExit, }) => {
+    const wizard = useWizard();
+    useEffect(() => {
+        if (wizard.currentStep === name) {
+            const checkAndEnter = async () => {
+                if (canEnter) {
+                    const allowed = await canEnter();
+                    if (!allowed) {
+                        onEnterFailed?.();
+                        wizard.back();
+                        return;
+                    }
+                }
+                await onEnter?.();
+            };
+            void checkAndEnter();
+        }
+        return () => {
+            if (wizard.currentStep === name) {
+                void onExit?.();
+            }
+        };
+    }, [wizard.currentStep, name, canEnter, onEnterFailed, onEnter, onExit, wizard]);
+    if (wizard.currentStep !== name) {
+        return null;
+    }
+    if (typeof children === "function") {
+        return _jsx(_Fragment, { children: children(wizard) });
+    }
+    return _jsx(_Fragment, { children: children });
+};
+const WizardGuard = ({ children, canEnter, onEnterFailed }) => {
+    const wizard = useWizard();
+    useEffect(() => {
+        const checkGuard = async () => {
+            if (canEnter) {
+                const allowed = await canEnter();
+                if (!allowed) {
+                    onEnterFailed?.();
+                    wizard.back();
+                }
+            }
+        };
+        void checkGuard();
+    }, [canEnter, onEnterFailed, wizard]);
+    return _jsx(_Fragment, { children: children });
+};
+const WizardGo = ({ step, children, onPress }) => {
+    const wizard = useWizard();
+    const handlePress = () => {
+        onPress?.();
+        wizard.goToStep(step);
+    };
+    if (typeof children === "function") {
+        return _jsx(_Fragment, { children: children(handlePress) });
+    }
+    return _jsx(TouchableOpacity, { onPress: handlePress, children: children });
+};
+const WizardBack = ({ children, onPress }) => {
+    const wizard = useWizard();
+    const handlePress = () => {
+        onPress?.();
+        wizard.back();
+    };
+    if (!children) {
+        return null;
+    }
+    if (typeof children === "function") {
+        return _jsx(_Fragment, { children: children(handlePress) });
+    }
+    return _jsx(TouchableOpacity, { onPress: handlePress, children: children });
+};
+export const Wizard = {
+    Root: WizardRoot,
+    Step: WizardStep,
+    Guard: WizardGuard,
+    Go: WizardGo,
+    Back: WizardBack,
+};

package/lib/views/Wizard/index.d.ts

@@ -0,0 +1,4 @@
+export type { WizardBackProps, WizardGoProps, WizardGuardProps, WizardStepGuard, WizardStepLifecycle, WizardStepProps, } from "../../views/Wizard/Wizard";
+export { Wizard } from "../../views/Wizard/Wizard";
+export type { WizardContextValue, WizardProviderProps, WizardStepId, } from "../../views/Wizard/Wizard.context";
+export { useWizard } from "../../views/Wizard/Wizard.context";

package/lib/views/Wizard/index.js

@@ -0,0 +1,2 @@
+export { Wizard } from "../../views/Wizard/Wizard";
+export { useWizard } from "../../views/Wizard/Wizard.context";

package/lib/views/types/IFormView.d.ts

@@ -0,0 +1,22 @@
+import { UIItem } from "../../views/types/UIItem";
+import { ReactNode } from "react";
+export interface IFormView<T> extends UIItem {
+    name: string;
+    description?: string;
+    item?: T;
+    isLoading?: boolean;
+    isEmpty?: boolean;
+    Toolbar?: ReactNode;
+    HeaderActionButton?: ReactNode;
+    Footer?: ReactNode;
+    FormComponent?: React.ComponentType<{
+        item: T;
+        readonly?: boolean;
+        isLoading?: boolean;
+        onSubmit?: () => void;
+    }>;
+    Groups?: ReactNode[];
+    onBack?: () => void | Promise<void>;
+    onSubmit?: () => void | Promise<void>;
+    onRefresh?: () => void | Promise<void>;
+}

package/lib/views/types/IFormView.js

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

package/lib/views/types/IListView.d.ts

@@ -0,0 +1,34 @@
+import { UICollectionItem, UIItem } from "../../views/types/UIItem";
+import { ReactNode } from "react";
+export type IRowItem<T> = T & UIItem & {
+    id: string | number;
+    index: number;
+    rowTitle: string;
+    rowSubtitle?: string;
+};
+export interface IRowItemProps<T> extends UIItem {
+    item: IRowItem<T> | T;
+}
+export interface IListView<T> extends UICollectionItem<T> {
+    name: string;
+    description?: string;
+    items: T[];
+    isLoading?: boolean;
+    onRefresh?: () => void | Promise<void>;
+    onBack?: () => void | Promise<void>;
+    ItemComponent?: React.ComponentType<IRowItemProps<T>>;
+    ToolbarComponent?: ReactNode;
+    SearchComponent?: ReactNode;
+    ActionComponent?: ReactNode;
+    FooterComponent?: ReactNode;
+    FloatingButtonComponent?: ReactNode;
+    EmptyComponent?: ReactNode;
+}
+export type RowKeys<T> = Partial<{
+    id?: keyof T;
+    rowTitle?: keyof T;
+    rowSubtitle?: keyof T;
+    readOnly?: keyof T;
+}>;
+export declare function toRowItem<T>(item: T, index: number, mapKeys?: RowKeys<T>): IRowItem<T>;
+export declare function toRowItems<T>(items: T[], mapKeys?: RowKeys<T>): IRowItem<T>[];

package/lib/views/types/IListView.js

@@ -0,0 +1,35 @@
+const defaultRowKeys = {
+    id: "id",
+    rowTitle: "name",
+    rowSubtitle: "description",
+    readOnly: "readonly",
+};
+export function toRowItem(item, index, mapKeys) {
+    let mapper = {};
+    if (!mapKeys) {
+        mapper = defaultRowKeys;
+    }
+    else {
+        mapper = { ...defaultRowKeys, ...mapKeys };
+    }
+    if (typeof item === "string" || typeof item === "number") {
+        return {
+            id: item,
+            rowTitle: String(item),
+            rowSubtitle: undefined,
+            readonly: false,
+        };
+    }
+    const rowItem = Object.create(Object.getPrototypeOf(item));
+    Object.assign(rowItem, item, {
+        id: item[mapper.id] || "N/A",
+        index: index,
+        rowTitle: item[mapper.rowTitle] || "N/A",
+        rowSubtitle: item[mapper.rowSubtitle] || undefined,
+        readonly: item[mapper.readOnly] || false,
+    });
+    return rowItem;
+}
+export function toRowItems(items, mapKeys) {
+    return items.map((item, index) => toRowItem(item, index, mapKeys));
+}

package/lib/views/types/UIItem.d.ts

@@ -0,0 +1,21 @@
+interface UIItemActions {
+    onPress?: () => void;
+    onDelete?: () => void;
+    onUpdate?: () => void;
+    onDuplicate?: () => void;
+}
+export interface UIItem extends UIItemActions {
+    readonly?: boolean;
+}
+interface UICollectionActions<T> {
+    onSearch?: (query: string) => void | Promise<void>;
+    onPressItem?: (item: T) => void | Promise<void>;
+    onDeleteItem?: (item: T) => void | Promise<void>;
+    onUpdateItem?: (item: T) => void | Promise<void>;
+    onDuplicateItem?: (item: T) => void | Promise<void>;
+    onSelectItem?: (item: T) => void | Promise<void>;
+}
+export interface UICollectionItem<T> extends UICollectionActions<T> {
+    readonly?: boolean;
+}
+export {};

package/lib/views/types/UIItem.js

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

package/lib/widgets/CircleButton.d.ts

@@ -0,0 +1,15 @@
+import { IconType } from "../utils/icon";
+import { ComponentType } from "react";
+interface CircleButtonProps {
+    iconType?: IconType;
+    size?: "sm" | "md" | "lg";
+    color?: string;
+    variant?: "primary" | "secondary" | "accent" | "success" | "danger" | "warning";
+    className?: string;
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+}
+export declare function CircleButton({ iconType, size, color, variant, className, customIcon, }: CircleButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/widgets/CircleButton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { View } from "react-native";
+import { tv } from "tailwind-variants";
+const circleButtonVariants = tv({
+    base: "rounded-full items-center justify-center shadow-sm",
+    variants: {
+        size: {
+            sm: "w-12 h-12", // 48px
+            md: "w-15 h-15", // 60px
+            lg: "w-20 h-20", // 80px
+        },
+        variant: {
+            primary: "bg-primary",
+            secondary: "bg-secondary",
+            accent: "bg-accent",
+            success: "bg-success",
+            danger: "bg-danger",
+            warning: "bg-warning",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        variant: "accent",
+    },
+});
+const SIZE_MAP = {
+    sm: { container: 48, icon: 24 },
+    md: { container: 60, icon: 30 },
+    lg: { container: 80, icon: 40 },
+};
+export function CircleButton({ iconType = "ionicons", size = "md", color = theme.text.inverse, variant = "accent", className, customIcon, }) {
+    const iconSize = SIZE_MAP[size].icon;
+    return (_jsx(View, { className: cn(circleButtonVariants({ size, variant }), className), children: _jsx(Display.Icon, { color: color, customIcon: customIcon, size: iconSize, type: iconType }) }));
+}

package/lib/widgets/GeoPermissionCard.d.ts

@@ -0,0 +1,8 @@
+interface GeoPermissionCardProps {
+    title: string;
+    hasPermission?: boolean;
+    loading?: boolean;
+    handleRequestPermission?: () => void;
+}
+declare function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }: GeoPermissionCardProps): import("react/jsx-runtime").JSX.Element;
+export default GeoPermissionCard;

package/lib/widgets/GeoPermissionCard.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Display, Form } from "../index";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+import { tv } from "tailwind-variants";
+const statusTextVariants = tv({
+    variants: {
+        granted: {
+            true: "text-green-600",
+            false: "text-red-500",
+        },
+    },
+});
+function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }) {
+    const granted = hasPermission !== undefined ? hasPermission : false;
+    return (_jsx(View, { className: "bg-slate-50 rounded-xl p-5 my-2.5 shadow-sm", children: _jsxs(View, { className: "flex-row items-start", children: [_jsx(Display.Icon, { color: granted ? theme.success : theme.danger, name: granted ? "check-circle" : "location-off", size: 35, type: "material" }), _jsxs(View, { className: "ml-2.5 flex-1", children: [_jsx(Typography.Text, { className: "text-base mb-1", semibold: true, children: title }), _jsx(Typography.Text, { className: statusTextVariants({ granted }), children: granted ? "Permiso activo." : "Permiso inactivo." }), !granted && (_jsx(Form.Button, { loading: loading, onPress: handleRequestPermission, size: "small", title: "Abrir Configuración" }))] })] }) }));
+}
+export default GeoPermissionCard;

package/lib/widgets/HomeHeader.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+interface HomeHeaderProps {
+    readonly title?: string;
+    readonly logo?: ReactNode;
+    readonly backButton?: boolean;
+    readonly onBack?: () => void;
+}
+export declare const HomeHeader: React.FC<HomeHeaderProps>;
+export {};

package/lib/widgets/HomeHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Display, Typography } from "../index";
+import GradientContainer from "../layouts/GradientContainer";
+import { theme } from "../theme";
+import { TouchableOpacity, View } from "react-native";
+export const HomeHeader = ({ title = "Distribución", logo, backButton = false, onBack, }) => {
+    const handleBackPress = onBack ?? (() => { });
+    return (_jsx(GradientContainer, { className: "pt-10 pb-4 px-4", children: _jsxs(View, { className: "relative items-center justify-center", children: [backButton && (_jsx(TouchableOpacity, { className: "absolute top-0 left-0 z-10 border border-text-inverse p-1.5 rounded", onPress: handleBackPress, children: _jsx(Display.Icon, { color: theme.text.inverse, name: "chevron-back", size: 25, type: "ionicons" }) })), _jsxs(View, { className: "items-center justify-center", children: [logo || _jsx(Display.Logo, { size: "medium" }), !!title && (_jsx(Typography.Text, { className: "text-text-inverse", variant: "h4", children: title }))] })] }) }));
+};

package/lib/widgets/JSONViewer.d.ts

@@ -0,0 +1,4 @@
+declare const JsonPreview: ({ selectedJson }: {
+    selectedJson: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default JsonPreview;

package/lib/widgets/JSONViewer.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThemedActivityIndicator } from "../theme";
+import { useMemo, useState } from "react";
+import { Platform, Text, View } from "react-native";
+const parseDeepJson = (value) => {
+    if (typeof value === "string") {
+        try {
+            const parsed = JSON.parse(value);
+            return parseDeepJson(parsed);
+        }
+        catch {
+            return value;
+        }
+    }
+    if (Array.isArray(value)) {
+        return value.map(parseDeepJson);
+    }
+    if (value && typeof value === "object") {
+        const result = {};
+        for (const key in value) {
+            result[key] = parseDeepJson(value[key]);
+        }
+        return result;
+    }
+    return value;
+};
+const JSON_COLORS = {
+    key: "#0066CC",
+    string: "#008000",
+    number: "#FF8C00",
+    boolean: "#9966CC",
+    null: "#999999",
+    punctuation: "#666666",
+};
+const MAX_JSON_SIZE = 500_000; // 500KB límite
+const MAX_LINES = 500; // Máximo 500 líneas con colores
+function parseJsonToColoredLines(jsonString) {
+    // Protección 1: Verificar tamaño
+    if (jsonString.length > MAX_JSON_SIZE) {
+        return [
+            {
+                text: `⚠️ JSON muy grande (${(jsonString.length / 1024).toFixed(1)}KB)\n\n`,
+                color: "#FF6600",
+            },
+            { text: "Mostrando como texto plano por performance...\n\n", color: "#666666" },
+            { text: jsonString, color: "#333333" },
+        ];
+    }
+    const lines = jsonString.split("\n");
+    // Protección 2: Verificar cantidad de líneas
+    if (lines.length > MAX_LINES) {
+        return [
+            {
+                text: `⚠️ JSON muy largo (${lines.length} líneas)\n\n`,
+                color: "#FF6600",
+            },
+            { text: "Mostrando como texto plano por performance...\n\n", color: "#666666" },
+            { text: jsonString, color: "#333333" },
+        ];
+    }
+    const coloredLines = [];
+    lines.forEach((line) => {
+        const trimmed = line.trim();
+        if (!trimmed ||
+            trimmed === "{" ||
+            trimmed === "}" ||
+            trimmed === "[" ||
+            trimmed === "]" ||
+            trimmed === "," ||
+            trimmed.endsWith(",")) {
+            const keyMatch = line.match(/^(\s*)"([^"]+)":\s*(.+)$/);
+            if (keyMatch) {
+                const indent = keyMatch[1];
+                const key = keyMatch[2];
+                const valueStr = keyMatch[3];
+                coloredLines.push({ text: indent, color: JSON_COLORS.punctuation }, { text: `"${key}"`, color: JSON_COLORS.key }, { text: ": ", color: JSON_COLORS.punctuation });
+                if (valueStr.startsWith('"')) {
+                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.string });
+                }
+                else if (!isNaN(Number(valueStr.replace(",", "")))) {
+                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.number });
+                }
+                else if (valueStr.startsWith("true") || valueStr.startsWith("false")) {
+                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.boolean });
+                }
+                else if (valueStr.startsWith("null")) {
+                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.null });
+                }
+                else {
+                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.punctuation });
+                }
+                return;
+            }
+        }
+        coloredLines.push({ text: line + "\n", color: JSON_COLORS.punctuation });
+    });
+    return coloredLines;
+}
+const JsonPreview = ({ selectedJson }) => {
+    const [isProcessing, setIsProcessing] = useState(false);
+    // Protección 3: Formatear con try-catch robusto
+    const formattedJson = useMemo(() => {
+        if (!selectedJson || selectedJson.trim() === "") {
+            return "{}";
+        }
+        try {
+            const parsed = JSON.parse(selectedJson);
+            const cleaned = parseDeepJson(parsed);
+            return JSON.stringify(cleaned, null, 2);
+        }
+        catch (error) {
+            console.warn("[JSONViewer] Error parsing JSON:", error);
+            return selectedJson; // Mostrar original si falla
+        }
+    }, [selectedJson]);
+    // Protección 4: Colorear con control de procesamiento
+    const coloredLines = useMemo(() => {
+        setIsProcessing(true);
+        try {
+            return parseJsonToColoredLines(formattedJson);
+        }
+        catch (error) {
+            console.warn("[JSONViewer] Error coloring JSON:", error);
+            // Fallback a texto plano si falla el coloreado
+            return [{ text: formattedJson, color: "#333333" }];
+        }
+        finally {
+            // Pequeño delay para que el loading sea visible si es necesario
+            setTimeout(() => setIsProcessing(false), 50);
+        }
+    }, [formattedJson]);
+    // Protección 5: Mostrar loading mientras procesa JSONs grandes
+    if (isProcessing && formattedJson.length > 50_000) {
+        return (_jsxs(View, { className: "p-4 items-center justify-center min-h-[200px]", children: [_jsx(ThemedActivityIndicator, { size: "large" }), _jsx(Text, { className: "mt-2 text-text-secondary text-sm", children: "Procesando JSON..." })] }));
+    }
+    return (_jsx(View, { className: "p-4", children: _jsx(Text, { selectable: true, style: {
+                fontFamily: Platform.select({
+                    ios: "Courier",
+                    android: "monospace",
+                    default: "Courier",
+                }),
+                fontSize: 13,
+                lineHeight: 18,
+            }, children: coloredLines.map((line, index) => (_jsx(Text, { style: { color: line.color }, children: line.text }, index))) }) }));
+};
+export default JsonPreview;

package/lib/widgets/MenuCard.d.ts

@@ -0,0 +1,13 @@
+import { IconType } from "../utils/icon";
+import { ComponentType } from "react";
+interface MenuCardProps {
+    title: string;
+    iconType?: IconType;
+    onPress?: () => void;
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+}
+export declare function MenuCard({ title, iconType, onPress, customIcon, }: MenuCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/widgets/MenuCard.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from "../theme/useTheme";
+import { Typography } from "../Typography";
+import { CircleButton } from "../widgets/CircleButton";
+import { TouchableOpacity, View } from "react-native";
+export function MenuCard({ title, iconType = "ionicons", onPress, customIcon, }) {
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "bg-bg-card rounded-2xl p-4 m-2 w-[45%] shadow-sm", onPress: onPress, style: theme.shadow["sm"], children: _jsxs(View, { className: "items-center justify-center", children: [_jsx(CircleButton, { customIcon: customIcon, iconType: iconType }), _jsx(Typography.Text, { className: "text-text-primary mt-3 text-center", variant: "label", children: title })] }) }));
+}

package/lib/widgets/MenuGrid.d.ts

@@ -0,0 +1,17 @@
+import { IconType } from "../utils/icon";
+import React, { ComponentType } from "react";
+export interface MenuItem {
+    id: string;
+    title: string;
+    iconType?: IconType;
+    onPress?: () => void;
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+}
+interface MenuGridProps {
+    readonly items: MenuItem[];
+}
+export declare const MenuGrid: React.FC<MenuGridProps>;
+export {};

package/lib/widgets/MenuGrid.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuCard } from "../widgets/MenuCard";
+import { View } from "react-native";
+export const MenuGrid = ({ items }) => {
+    return (_jsx(View, { className: "flex-row flex-wrap justify-start p-2 bg-bg-page", children: items.map((item) => (_jsx(MenuCard, { customIcon: item.customIcon, iconType: item.iconType, onPress: item.onPress, title: item.title }, item.id))) }));
+};