@sincpro/mobile-ui 0.1.2 → 0.1.3

package/lib/views/FormViewV2.context.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+const Context = createContext(null);
+export function FormViewProvider({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onBack, children, }) {
+    const [showRefreshing, setShowRefreshing] = useState(false);
+    return (_jsx(Context.Provider, { value: {
+            name,
+            description,
+            item,
+            isLoading,
+            isEmpty,
+            hasError,
+            errorMessage,
+            readonly,
+            showRefreshing,
+            setShowRefreshing,
+            onRefresh,
+            onRetry,
+            onBack,
+        }, children: children }));
+}
+export function useFormView() {
+    const context = useContext(Context);
+    if (!context) {
+        throw new Error("useFormView must be used within FormViewV2");
+    }
+    return context;
+}

package/lib/views/FormViewV2.d.ts

@@ -0,0 +1,60 @@
+import { EVariantScreenHeader } from "../widgets/ScreenHeader";
+import { ReactNode } from "react";
+interface FormViewProps<T> {
+    name: string;
+    description?: string;
+    item: T | null;
+    isLoading?: boolean;
+    isEmpty?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    readonly?: boolean;
+    onRefresh?: () => Promise<void>;
+    onRetry?: () => void;
+    onBack?: () => void;
+    withContainer?: boolean;
+    children: ReactNode;
+}
+declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRetry, onBack, withContainer, children, }: FormViewProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Header({ variant, children, }: {
+    variant?: EVariantScreenHeader;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function HeaderActions({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function HeaderActionsBar({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Content({ withMargin, children, }: {
+    withMargin?: boolean;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Form({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Groups({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare function Group({ children, withMargin, elevation, }: {
+    children: ReactNode;
+    withMargin?: boolean;
+    elevation?: "sm" | "md" | "lg";
+}): import("react/jsx-runtime").JSX.Element;
+declare function Footer({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare const FormViewV2: {
+    Root: typeof FormViewRoot;
+    Header: typeof Header & {
+        Actions: typeof HeaderActions;
+        ActionsBar: typeof HeaderActionsBar;
+    };
+    Content: typeof Content & {
+        Form: typeof Form;
+        Groups: typeof Groups;
+        Group: typeof Group;
+    };
+    Footer: typeof Footer;
+};
+export default FormViewV2;

package/lib/views/FormViewV2.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { ErrorBoundary, Feedback } from "../Feedback";
+import Container from "../layouts/Container";
+import { theme } from "../theme";
+import { FormViewProvider, useFormView } from "../views/FormViewV2.context";
+import ScreenHeader from "../widgets/ScreenHeader";
+import React from "react";
+import { RefreshControl, View } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onBack, withContainer = true, children, }) {
+    const Wrapper = withContainer ? Container : View;
+    const wrapperProps = withContainer ? {} : { style: { flex: 1 } };
+    return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
+}
+function Header({ variant = "FLAT_HEADER" /* EVariantScreenHeader.FLAT_HEADER */, children, }) {
+    const { name, description, onBack } = useFormView();
+    return (_jsx(_Fragment, { children: _jsx(ScreenHeader, { onBack: onBack, subtitle: description ? description : `Seleccionar ${name}`, title: name, variant: variant, children: children }) }));
+}
+function HeaderActions({ children }) {
+    return (_jsx(View, { className: "flex-row px-4 my-4 items-center justify-between flex-1 gap-2", children: children }));
+}
+function HeaderActionsBar({ children }) {
+    return (_jsx(View, { className: "bg-bg-card px-4 py-3 border-b border-border-default flex-row gap-2", children: children }));
+}
+function Content({ withMargin = false, children, }) {
+    const { name, isLoading, isEmpty, hasError, errorMessage, item, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useFormView();
+    const handleRefresh = React.useCallback(async () => {
+        setShowRefreshing(true);
+        if (onRefresh) {
+            await onRefresh();
+        }
+        setShowRefreshing(false);
+    }, [onRefresh, setShowRefreshing]);
+    const isCenteredContent = isLoading || isEmpty || !item || hasError;
+    return (_jsx(KeyboardAwareScrollView, { bottomOffset: 20, contentContainerStyle: {
+            flexGrow: 1,
+            justifyContent: isCenteredContent ? "center" : "flex-start",
+            alignItems: isCenteredContent ? "center" : "stretch",
+        }, keyboardShouldPersistTaps: "handled", refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { flex: 1 }, children: isCenteredContent ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Feedback.Loading, { message: `Cargando ${name}...` })) : hasError ? (_jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry })) : (_jsx(Feedback.Empty, {})) })) : (_jsx(View, { style: withMargin ? { paddingHorizontal: 16 } : undefined, children: children })) }));
+}
+function Form({ children }) {
+    const { isEmpty, item } = useFormView();
+    if (isEmpty || !item) {
+        return _jsx(Feedback.Empty, {});
+    }
+    return _jsx(_Fragment, { children: children });
+}
+function Groups({ children }) {
+    const { isEmpty } = useFormView();
+    if (isEmpty) {
+        return null;
+    }
+    return _jsx(_Fragment, { children: children });
+}
+function Group({ children, withMargin = true, elevation = "md", }) {
+    const groupClass = withMargin
+        ? "bg-bg-card mx-4 my-1 p-1 rounded-lg border border-border-light"
+        : "bg-bg-card p-1 rounded-lg border border-border-light";
+    return (_jsx(View, { className: groupClass, style: theme.shadow[elevation], children: children }));
+}
+function Footer({ children }) {
+    const { isEmpty, isLoading } = useFormView();
+    if (isEmpty || isLoading) {
+        return null;
+    }
+    return (_jsx(View, { className: "bg-bg-card px-4 py-3 border-t border-border-default", style: theme.shadow.sm, children: children }));
+}
+// Nested Header components
+const HeaderWithSubComponents = Object.assign(Header, {
+    Actions: HeaderActions,
+    ActionsBar: HeaderActionsBar,
+});
+// Nested Content components
+const ContentWithSubComponents = Object.assign(Content, {
+    Form,
+    Groups,
+    Group,
+});
+export const FormViewV2 = {
+    Root: FormViewRoot,
+    Header: HeaderWithSubComponents,
+    Content: ContentWithSubComponents,
+    Footer,
+};
+export default FormViewV2;

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

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+interface ListViewContextValue<T> {
+    name: string;
+    description?: string;
+    items: T[];
+    isLoading: boolean;
+    hasError: boolean;
+    errorMessage?: string;
+    readonly: boolean;
+    showRefreshing: boolean;
+    setShowRefreshing: (value: boolean) => void;
+    onRefresh?: () => Promise<void>;
+    onRetry?: () => void;
+    onPressItem?: (item: T) => void;
+    onDeleteItem?: (item: T) => void;
+    onSearch?: (query: string) => void;
+    onBack?: () => void;
+}
+export declare function ListViewProvider<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, children, }: {
+    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;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useListView<T>(): ListViewContextValue<T>;
+export {};

package/lib/views/ListViewV2.context.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+const Context = createContext(null);
+export function ListViewProvider({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, children, }) {
+    const [showRefreshing, setShowRefreshing] = useState(false);
+    return (_jsx(Context.Provider, { value: {
+            name,
+            description,
+            items,
+            isLoading,
+            hasError,
+            errorMessage,
+            readonly,
+            showRefreshing,
+            setShowRefreshing,
+            onRefresh,
+            onRetry,
+            onPressItem,
+            onDeleteItem,
+            onSearch,
+            onBack,
+        }, children: children }));
+}
+export function useListView() {
+    const context = useContext(Context);
+    if (!context) {
+        throw new Error("useListView must be used within ListViewV2");
+    }
+    return context;
+}

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 "react/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;