@sincpro/mobile-ui 0.1.2 → 0.1.4

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 "nativewind/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 "nativewind/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,11 @@
+import React, { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
+interface HomeHeaderProps {
+    readonly title?: string;
+    readonly logo?: ReactNode;
+    readonly logoSource?: ImageSourcePropType;
+    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 "nativewind/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, logoSource, 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", source: logoSource }), !!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 "nativewind/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 "nativewind/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 "nativewind/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))) }));
+};

package/lib/widgets/ScreenHeader.d.ts

@@ -0,0 +1,21 @@
+import { type ImageSourcePropType } from "react-native";
+export declare const enum EVariantScreenHeader {
+    FLAT_HEADER = "FLAT_HEADER",
+    ROUNDED_HEADER = "ROUNDED_HEADER",
+    LOGO_WITH_BACK_BUTTON = "LOGO_WITH_BACK_BUTTON",
+    ONLY_LOGO = "ONLY_LOGO"
+}
+interface ScreenHeaderProps {
+    variant?: EVariantScreenHeader;
+    title?: string;
+    centerTitle?: boolean;
+    subtitle?: string;
+    logo?: boolean;
+    logoSource?: ImageSourcePropType;
+    rightComponent?: React.ReactNode;
+    children?: React.ReactNode;
+    withGradientContainer?: boolean;
+    onBack?: () => void;
+}
+declare function ScreenHeader({ variant, title, subtitle, logoSource, onBack, children, }: ScreenHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export default ScreenHeader;

package/lib/widgets/ScreenHeader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import GradientContainer from "../layouts/GradientContainer";
+import { Navigation } from "../Navigation";
+import { View } from "react-native";
+const Header = Navigation.Header;
+const HeaderToolbar = Navigation.HeaderToolbar;
+function ScreenHeader({ variant, title = "Distribución", subtitle, logoSource, onBack, children, }) {
+    switch (variant) {
+        case "FLAT_HEADER" /* EVariantScreenHeader.FLAT_HEADER */:
+            return (_jsxs(_Fragment, { children: [_jsx(HeaderToolbar, { flat: true, onBack: onBack, subtitle: subtitle, title: title, withBackground: true }), _jsx(View, { children: children })] }));
+        case "ROUNDED_HEADER" /* EVariantScreenHeader.ROUNDED_HEADER */:
+            return (_jsx(GradientContainer, { className: "pt-0.5 shadow-lg shadow-black/70 rounded-b-[18px] pb-6", children: _jsx(HeaderToolbar, { flat: true, onBack: onBack, subtitle: subtitle, title: title, withBackground: false, children: children }) }));
+        case "LOGO_WITH_BACK_BUTTON" /* EVariantScreenHeader.LOGO_WITH_BACK_BUTTON */:
+            return (_jsx(Header, { backButton: true, handleBackButton: onBack, logoSource: logoSource, title: "" }));
+        case "ONLY_LOGO" /* EVariantScreenHeader.ONLY_LOGO */:
+            return _jsx(Header, { logoSource: logoSource, title: title });
+        default:
+            return null;
+    }
+}
+export default ScreenHeader;

package/lib/widgets/TimeZoneSelector.d.ts

@@ -0,0 +1,7 @@
+import { TimezoneLocale } from "../utils/timezone";
+interface TimeZoneSelectorProps {
+    onSelect?: (tz: TimezoneLocale) => void;
+    timezone?: string | null;
+}
+export declare function TimeZoneSelector({ onSelect, timezone }: TimeZoneSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/widgets/TimeZoneSelector.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { Display, Form } from "../index";
+import { theme } from "../theme/useTheme";
+import { Typography } from "../Typography";
+import { TimeZoneSelectorModal } from "../widgets/TimeZoneSelectorModal";
+import { useState } from "react";
+import { View } from "react-native";
+export function TimeZoneSelector({ onSelect, timezone }) {
+    const [currentTimezone, setCurrentTimezone] = useState(timezone);
+    const [selectorVisible, setSelectorVisible] = useState(false);
+    function handleTimezoneSelected(tz) {
+        setCurrentTimezone(tz.timezone);
+        onSelect?.(tz);
+    }
+    const displayTimezone = currentTimezone
+        ? currentTimezone.replace(/_/g, " ").replace("America/", "")
+        : "No configurada";
+    return (_jsxs(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: currentTimezone ? theme.info : theme.text.tertiary, name: "schedule", size: 35, type: "material" }), _jsxs(View, { className: "ml-2.5 flex-1", children: [_jsx(Typography.Text, { className: "text-base mb-1", semibold: true, children: "Zona Horaria" }), currentTimezone ? (_jsxs(View, { className: "mt-2 bg-white rounded-lg p-3", children: [_jsx(Typography.Text, { className: "text-gray-700", semibold: true, children: displayTimezone }), _jsx(Typography.Text, { className: "text-gray-400 text-xs", children: currentTimezone }), _jsx(View, { className: "flex-row gap-2 mt-2", children: _jsx(Form.Button, { onPress: () => setSelectorVisible(true), size: "small", title: "Cambiar", variant: "outline" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: "text-gray-500 mb-2", children: "Selecciona una zona horaria" }), _jsx(Form.Button, { onPress: () => setSelectorVisible(true), size: "small", title: "Seleccionar Zona Horaria" })] }))] })] }), _jsx(TimeZoneSelectorModal, { currentTimezone: currentTimezone, onClose: () => setSelectorVisible(false), onSelect: handleTimezoneSelected, visible: selectorVisible })] }));
+}

package/lib/widgets/TimeZoneSelectorModal.d.ts

@@ -0,0 +1,9 @@
+import { TimezoneLocale } from "../utils/timezone";
+interface TimeZoneSelectorModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onSelect: (tz: TimezoneLocale) => void;
+    currentTimezone?: string | null;
+}
+declare function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }: TimeZoneSelectorModalProps): import("react/jsx-runtime").JSX.Element;
+export { TimeZoneSelectorModal };

package/lib/widgets/TimeZoneSelectorModal.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { BottomSheet } from "../Dialog/BottomSheet";
+import { Display, Form } from "../index";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { useMemo, useState } from "react";
+import { FlatList, TextInput, TouchableOpacity, View } from "react-native";
+const TIMEZONES_LOCALES = {
+    bolivia: { timezone: "America/La_Paz", locale: "es-BO" },
+    costaRica: { timezone: "America/Costa_Rica", locale: "es-CR" },
+    guatemala: { timezone: "America/Guatemala", locale: "es-GT" },
+    argentina: { timezone: "America/Argentina/Buenos_Aires", locale: "es-AR" },
+    peru: { timezone: "America/Lima", locale: "es-PE" },
+    newYork: { timezone: "America/New_York", locale: "en-US" },
+    japon: { timezone: "Asia/Tokyo", locale: "ja-JP" },
+};
+function TimezoneRow({ item, isSelected, onSelect, }) {
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: `flex-row items-center p-4 border-b border-gray-100 ${isSelected ? "bg-blue-50" : "bg-white"}`, onPress: onSelect, children: [_jsx(Display.Icon, { color: isSelected ? theme.info : theme.text.secondary, name: "schedule", size: 24, type: "material" }), _jsxs(View, { className: "ml-3 flex-1", children: [_jsx(Typography.Text, { semibold: true, children: item.label }), _jsx(Typography.Text, { className: "text-gray-400 text-xs", children: item.locale })] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-blue-500 items-center justify-center", children: _jsx(Display.Icon, { color: theme.text.inverse, name: "check", size: 16, type: "material" }) }))] }));
+}
+function EmptyState() {
+    return (_jsxs(View, { className: "p-8 items-center justify-center", style: { minHeight: 200 }, children: [_jsx(Display.Icon, { color: theme.text.tertiary, name: "search-off", size: 48, type: "material" }), _jsx(Typography.Text, { className: "text-gray-500 text-center mt-4", children: "No se encontraron zonas horarias" })] }));
+}
+function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }) {
+    const [query, setQuery] = useState("");
+    const [selectedTimezone, setSelectedTimezone] = useState(currentTimezone || null);
+    const timezoneList = useMemo(() => {
+        return Object.values(TIMEZONES_LOCALES).map((tz) => ({
+            ...tz,
+            label: tz.timezone.replace(/_/g, " ").replace("America/", ""),
+        }));
+    }, []);
+    const filteredTimezones = useMemo(() => {
+        if (!query.trim())
+            return timezoneList;
+        const normalizedQuery = query
+            .toLowerCase()
+            .normalize("NFD")
+            .replace(/[\u0300-\u036f]/g, "");
+        return timezoneList.filter(({ label, timezone }) => {
+            const normalizedLabel = label
+                .toLowerCase()
+                .normalize("NFD")
+                .replace(/[\u0300-\u036f]/g, "");
+            const normalizedTz = timezone.toLowerCase();
+            return (normalizedLabel.includes(normalizedQuery) || normalizedTz.includes(normalizedQuery));
+        });
+    }, [query, timezoneList]);
+    function handleConfirm() {
+        const selected = timezoneList.find((tz) => tz.timezone === selectedTimezone);
+        if (selected) {
+            onSelect({ timezone: selected.timezone, locale: selected.locale });
+            onClose();
+        }
+    }
+    return (_jsxs(BottomSheet.Root, { onClose: onClose, size: "large", visible: visible, children: [_jsxs(BottomSheet.Header, { children: [_jsxs(View, { className: "px-5 pb-3", children: [_jsx(Typography.Text, { bold: true, variant: "subtitle", children: "Zona Horaria" }), _jsx(Typography.Text, { className: "text-gray-500 text-xs", children: "Selecciona tu zona horaria" })] }), _jsx(View, { className: "px-5 pb-3", children: _jsx(TextInput, { className: "bg-gray-100 px-4 py-3 rounded-xl", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, value: query }) })] }), _jsx(BottomSheet.Content, { scrollable: true, children: filteredTimezones.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(FlatList, { data: filteredTimezones, keyExtractor: (item) => item.timezone, renderItem: ({ item }) => (_jsx(TimezoneRow, { isSelected: selectedTimezone === item.timezone, item: item, onSelect: () => setSelectedTimezone(item.timezone) })), scrollEnabled: false })) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", children: [_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: onClose, title: "Cancelar", variant: "outline" }) }), selectedTimezone && (_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: handleConfirm, title: "Confirmar", variant: "primary" }) }))] })] }));
+}
+export { TimeZoneSelectorModal };

package/lib/widgets/index.d.ts

@@ -0,0 +1,7 @@
+export { CircleButton } from "../widgets/CircleButton";
+export { default as GeoPermissionCard } from "../widgets/GeoPermissionCard";
+export { HomeHeader } from "../widgets/HomeHeader";
+export { MenuCard } from "../widgets/MenuCard";
+export type { MenuItem } from "../widgets/MenuGrid";
+export { MenuGrid } from "../widgets/MenuGrid";
+export { TimeZoneSelector } from "../widgets/TimeZoneSelector";

package/lib/widgets/index.js

@@ -0,0 +1,6 @@
+export { CircleButton } from "../widgets/CircleButton";
+export { default as GeoPermissionCard } from "../widgets/GeoPermissionCard";
+export { HomeHeader } from "../widgets/HomeHeader";
+export { MenuCard } from "../widgets/MenuCard";
+export { MenuGrid } from "../widgets/MenuGrid";
+export { TimeZoneSelector } from "../widgets/TimeZoneSelector";