@sincpro/mobile-ui 0.1.2 → 0.1.4

package/lib/views/ListViewV2.d.ts

@@ -0,0 +1,131 @@
+import { EVariantScreenHeader } from "../widgets/ScreenHeader";
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface ListViewProps<T> {
+    name: string;
+    description?: string;
+    items: T[];
+    isLoading?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    readonly?: boolean;
+    onRefresh?: () => Promise<void>;
+    onRetry?: () => void;
+    onPressItem?: (item: T) => void;
+    onDeleteItem?: (item: T) => void;
+    onSearch?: (query: string) => void;
+    onBack?: () => void;
+    backgroundColor?: string;
+    withContainer?: boolean;
+    children: ReactNode;
+}
+declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, backgroundColor, withContainer, children, }: ListViewProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Header({ variant, children, }: {
+    variant?: EVariantScreenHeader;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function HeaderSearch({ searchQuery }: {
+    searchQuery?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare function HeaderActions({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function HeaderFilters({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+interface FilterChipProps {
+    label: string;
+    active?: boolean;
+    onPress: () => void;
+}
+declare function FilterChip({ label, active, onPress }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterChips({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Content({ children, withMargin, }: {
+    children?: (item: any) => ReactNode;
+    withMargin?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ContentList({ children, contentWithMargin, }: {
+    children?: (item: any) => ReactNode;
+    contentWithMargin: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Footer({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare function FloatingButton({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+interface RowRootProps {
+    children: ReactNode;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    showDivider?: boolean;
+    style?: StyleProp<ViewStyle>;
+    backgroundColor?: string;
+}
+declare function RowRoot({ children, onPress, onLongPress, showDivider, style, backgroundColor, }: RowRootProps): import("react/jsx-runtime").JSX.Element;
+interface RowAvatarProps {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function RowAvatar({ children, style }: RowAvatarProps): import("react/jsx-runtime").JSX.Element;
+interface RowContentProps {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function RowContent({ children, style }: RowContentProps): import("react/jsx-runtime").JSX.Element;
+interface RowTitleProps {
+    children: ReactNode;
+    badge?: ReactNode;
+    rightComponent?: ReactNode;
+    numberOfLines?: number;
+}
+declare function RowTitle({ children, badge, rightComponent, numberOfLines }: RowTitleProps): import("react/jsx-runtime").JSX.Element;
+interface RowSubtitleProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function RowSubtitle({ children, className }: RowSubtitleProps): import("react/jsx-runtime").JSX.Element;
+interface RowFooterProps {
+    left?: ReactNode;
+    right?: ReactNode;
+    children?: ReactNode;
+}
+declare function RowFooter({ left, right, children }: RowFooterProps): import("react/jsx-runtime").JSX.Element;
+interface RowActionsProps {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function RowActions({ children, style }: RowActionsProps): import("react/jsx-runtime").JSX.Element;
+interface RowActionButtonProps {
+    icon: ReactNode;
+    onPress?: () => void;
+}
+declare function RowActionButton({ icon, onPress }: RowActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const ListViewV2: {
+    Root: typeof ListViewRoot;
+    Header: typeof Header & {
+        Search: typeof HeaderSearch;
+        Actions: typeof HeaderActions;
+        Filters: typeof HeaderFilters & {
+            Chip: typeof FilterChip;
+            Chips: typeof FilterChips;
+        };
+    };
+    Content: typeof Content & {
+        List: typeof ContentList;
+        Row: typeof RowRoot & {
+            Avatar: typeof RowAvatar;
+            Content: typeof RowContent;
+            Title: typeof RowTitle;
+            Subtitle: typeof RowSubtitle;
+            Footer: typeof RowFooter;
+            Actions: typeof RowActions;
+            ActionButton: typeof RowActionButton;
+        };
+    };
+    Footer: typeof Footer;
+    FloatingButton: typeof FloatingButton;
+};
+export default ListViewV2;

package/lib/views/ListViewV2.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { Display } from "../Display";
+import { ErrorBoundary, Feedback } from "../Feedback";
+import { Form } from "../Form";
+import Container from "../layouts/Container";
+import { Navigation } from "../Navigation";
+import { theme } from "../theme";
+import { cn, tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { ListViewProvider, useListView } from "../views/ListViewV2.context";
+import { toRowItems } from "../views/types/IListView";
+import ScreenHeader from "../widgets/ScreenHeader";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { FlatList, RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
+function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, backgroundColor, withContainer = true, children, }) {
+    const Wrapper = withContainer ? Container : View;
+    const wrapperProps = withContainer
+        ? {} // Container maneja su propio backgroundColor
+        : { className: "flex-1 bg-bg-page" };
+    // Propagate contentWithMargin to ContentList via context
+    return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isLoading: isLoading, items: items, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
+}
+function Header({ variant = "ROUNDED_HEADER" /* EVariantScreenHeader.ROUNDED_HEADER */, children, }) {
+    const { name, description, onBack } = useListView();
+    return (_jsx(ScreenHeader, { onBack: onBack, subtitle: description ? description : `Seleccionar ${name}`, title: name, variant: variant, children: children }));
+}
+function HeaderSearch({ searchQuery = "" }) {
+    const { name, onSearch } = useListView();
+    const [query, setQuery] = useState(searchQuery);
+    const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setDebouncedQuery(query);
+        }, 400);
+        return () => clearTimeout(timeout);
+    }, [query]);
+    useEffect(() => {
+        if (onSearch && debouncedQuery !== undefined) {
+            onSearch(debouncedQuery);
+        }
+    }, [debouncedQuery]);
+    if (!onSearch) {
+        return null;
+    }
+    return (_jsx(View, { className: "px-4 pb-3 mt-2", children: _jsx(Form.SearchBar, { onChangeText: setQuery, placeholder: `Buscar ${name}`, value: query }) }));
+}
+function HeaderActions({ children }) {
+    return (_jsx(View, { className: "flex-row px-4 my-3 items-center justify-between flex-1 gap-2", children: children }));
+}
+function HeaderFilters({ children }) {
+    return _jsx(View, { className: "px-4 py-2 items-center", children: children });
+}
+const filterChip = tv({
+    base: "py-[5px] px-2.5 items-center justify-center rounded-md",
+    variants: {
+        active: {
+            true: "bg-primary",
+            false: "bg-transparent",
+        },
+    },
+    defaultVariants: { active: false },
+});
+const filterChipText = tv({
+    variants: {
+        active: {
+            true: "text-text-on-primary font-semibold",
+            false: "text-text-secondary",
+        },
+    },
+    defaultVariants: { active: false },
+});
+function FilterChip({ label, active = false, onPress }) {
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: filterChip({ active }), onPress: onPress, children: _jsxs(Typography.Text, { className: filterChipText({ active }), variant: "bodySmall", children: [active ? "• " : "", label] }) }));
+}
+function FilterChips({ children }) {
+    const childArray = React.Children.toArray(children);
+    return (_jsx(ScrollView, { contentContainerStyle: {
+            paddingHorizontal: 16,
+        }, horizontal: true, showsHorizontalScrollIndicator: false, style: { flexGrow: 0 }, children: _jsx(View, { className: "flex-row bg-bg-card rounded-[10px] border-[1.5px] border-border-default self-center shadow-sm overflow-hidden", children: childArray.map((child, index) => (_jsxs(View, { className: "flex-row items-center", children: [child, index < childArray.length - 1 && (_jsx(View, { className: "w-[1.5px] h-[22px] bg-border-divider opacity-50 my-0.5" }))] }, index))) }) }));
+}
+function Content({ children, withMargin = true, }) {
+    const { name, items, isLoading, hasError, errorMessage, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useListView();
+    const handleRefresh = useCallback(async () => {
+        setShowRefreshing(true);
+        if (onRefresh) {
+            await onRefresh();
+        }
+        setShowRefreshing(false);
+    }, [onRefresh, setShowRefreshing]);
+    if (isLoading) {
+        return _jsx(Feedback.Loading, { message: `Cargando ${name}...` });
+    }
+    if (hasError) {
+        return (_jsx(ScrollView, { contentContainerStyle: {
+                flexGrow: 1,
+                justifyContent: "center",
+                alignItems: "center",
+            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
+    }
+    if (items.length === 0) {
+        return (_jsx(ScrollView, { contentContainerStyle: {
+                flexGrow: 1,
+                justifyContent: "center",
+                alignItems: "center",
+            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), children: _jsx(Feedback.Empty, {}) }));
+    }
+    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentWithMargin: withMargin, children: children })] }));
+}
+function ContentList({ children, contentWithMargin, }) {
+    const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, } = useListView();
+    const rowItems = useMemo(() => toRowItems(items), [items]);
+    const handleRefresh = useCallback(async () => {
+        setShowRefreshing(true);
+        if (onRefresh) {
+            await onRefresh();
+        }
+        setShowRefreshing(false);
+    }, [onRefresh, setShowRefreshing]);
+    const renderItem = useCallback(({ item }) => {
+        if (children) {
+            return _jsx(_Fragment, { children: children(item) });
+        }
+        const onPress = () => onPressItem?.(item);
+        const onDelete = () => onDeleteItem?.(item);
+        const isReadOnly = item.readonly || readonly || false;
+        return (_jsx(Navigation.RowItem, { item: { ...item }, onDelete: onDelete, onPress: onPress, readonly: isReadOnly }));
+    }, [children, onPressItem, onDeleteItem, readonly]);
+    return (_jsx(View, { style: {
+            flex: 1,
+            marginTop: 2,
+            paddingHorizontal: contentWithMargin ? 4 : 0,
+        }, children: _jsx(FlatList, { data: rowItems, keyExtractor: (item) => String(item.index), refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false }) }));
+}
+function Footer({ children }) {
+    const { items } = useListView();
+    if (items.length === 0) {
+        return null;
+    }
+    return _jsx(View, { className: "px-4", children: children });
+}
+function FloatingButton({ children }) {
+    return _jsx(View, { className: "absolute bottom-[50px] right-6 z-10", children: children });
+}
+function RowRoot({ children, onPress, onLongPress, showDivider = true, style, backgroundColor, }) {
+    const baseClass = "flex-row items-center py-3 px-4 bg-bg-card";
+    const dividerClass = showDivider ? " border-b border-border-default" : "";
+    const content = (_jsx(View, { className: baseClass + dividerClass, style: [backgroundColor ? { backgroundColor } : undefined, style], children: children }));
+    if (onPress || onLongPress) {
+        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, onLongPress: onLongPress, onPress: onPress, children: content }));
+    }
+    return content;
+}
+function RowAvatar({ children, style }) {
+    return (_jsx(View, { className: "mr-3 justify-center items-center", style: style, children: children }));
+}
+function RowContent({ children, style }) {
+    return (_jsx(View, { className: "flex-1 gap-0.5", style: style, children: children }));
+}
+function RowTitle({ children, badge, rightComponent, numberOfLines = 1 }) {
+    return (_jsxs(View, { className: "flex-row items-center justify-between gap-2", children: [_jsx(Typography.Text, { className: "flex-1 flex-shrink min-w-0", numberOfLines: numberOfLines, semibold: true, variant: "body", children: children }), _jsxs(View, { className: "flex-row items-center gap-2", children: [badge, rightComponent] })] }));
+}
+function RowSubtitle({ children, className }) {
+    return (_jsx(Typography.Text, { className: cn("text-text-secondary", className), variant: "bodySmall", children: children }));
+}
+function RowFooter({ left, right, children }) {
+    if (children) {
+        return _jsx(View, { className: "mt-1", children: children });
+    }
+    return (_jsxs(View, { className: "flex-row items-center justify-between mt-1", children: [_jsx(View, { className: "flex-row items-center gap-2", children: left }), _jsx(View, { className: "flex-row items-center", children: right })] }));
+}
+function RowActions({ children, style }) {
+    return (_jsx(View, { className: "flex-row items-center gap-1 ml-2", style: style, children: children }));
+}
+function RowActionButton({ icon, onPress }) {
+    return (_jsx(TouchableOpacity, { className: "p-1.5 rounded", onPress: onPress, children: icon }));
+}
+const FiltersWithSubComponents = Object.assign(HeaderFilters, {
+    Chip: FilterChip,
+    Chips: FilterChips,
+});
+const HeaderWithSubComponents = Object.assign(Header, {
+    Search: HeaderSearch,
+    Actions: HeaderActions,
+    Filters: FiltersWithSubComponents,
+});
+const RowWithSubComponents = Object.assign(RowRoot, {
+    Avatar: RowAvatar,
+    Content: RowContent,
+    Title: RowTitle,
+    Subtitle: RowSubtitle,
+    Footer: RowFooter,
+    Actions: RowActions,
+    ActionButton: RowActionButton,
+});
+const ContentWithSubComponents = Object.assign(Content, {
+    List: ContentList,
+    Row: RowWithSubComponents,
+});
+export const ListViewV2 = {
+    Root: ListViewRoot,
+    Header: HeaderWithSubComponents,
+    Content: ContentWithSubComponents,
+    Footer,
+    FloatingButton,
+};
+export default ListViewV2;

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export type WizardStepId = string;
+export interface WizardContextValue {
+    currentStep: WizardStepId;
+    stepHistory: WizardStepId[];
+    goToStep: (step: WizardStepId) => void;
+    back: () => void;
+    next: () => void;
+    reset: (initialStep?: WizardStepId) => void;
+    canGoBack: boolean;
+    canGoNext: boolean;
+    totalSteps: number;
+    currentStepIndex: number;
+    progress: number;
+}
+export interface WizardProviderProps {
+    children: ReactNode;
+    initialStep: WizardStepId;
+    steps?: WizardStepId[];
+    onComplete?: () => void;
+    onCancel?: () => void;
+    isLoading?: boolean;
+    loadingMessage?: string;
+}
+export declare function WizardProvider({ children, initialStep, steps, onComplete, onCancel, isLoading, loadingMessage, }: WizardProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useWizard(): WizardContextValue;

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/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 "nativewind/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>[];