@sincpro/mobile-ui 0.5.0 → 0.7.0

package/dist/widgets/MenuSection.js

@@ -0,0 +1 @@
+export { MenuSection } from "../Navigation/Navigation.MenuSection";

package/dist/widgets/PromoBanner.d.ts

@@ -0,0 +1,38 @@
+import { ComponentType } from "react";
+export interface PromoBannerItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    /** Left accent icon. */
+    icon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    /** Gradient color stops for the card surface. */
+    gradient?: readonly [string, string, ...string[]];
+    /** Accent color for the CTA button and badge. Defaults to `theme.accent`. */
+    accentColor?: string;
+    ctaLabel?: string;
+    onPress?: () => void;
+    /** Small badge text (e.g. "Nuevo", "Promo"). */
+    badge?: string;
+}
+export interface PromoBannerProps {
+    items: PromoBannerItem[];
+    /** Section heading above the banners row. */
+    title?: string;
+}
+/**
+ * Horizontal scrollable row of promotional/announcement cards.
+ * Each card supports gradient surfaces, icon, badge, title, subtitle, and a CTA button.
+ *
+ * Usage:
+ *   <PromoBanner
+ *     title="Destacados"
+ *     items={[
+ *       { id: "1", title: "Nueva ruta", subtitle: "Servicio express", badge: "Nuevo",
+ *         gradient: ["#0D2B1F", "#00C357"], ctaLabel: "Ver más", onPress: ... },
+ *     ]}
+ *   />
+ */
+export declare function PromoBanner({ items, title }: PromoBannerProps): import("react").JSX.Element;

package/dist/widgets/PromoBanner.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import GradientSurface from "../Display/Display.GradientSurface";
+import { useTheme } from "../theme";
+import { Typography } from "../Typography";
+import { ScrollView, TouchableOpacity, View } from "react-native";
+function BannerCard({ item }) {
+    const theme = useTheme();
+    const accent = item.accentColor ?? theme.accent;
+    const hasGradient = !!item.gradient;
+    const Icon = item.icon;
+    const textColor = hasGradient ? "#FFFFFF" : theme.text.primary;
+    const subtextColor = hasGradient ? "rgba(255,255,255,0.75)" : theme.text.secondary;
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.85, onPress: item.onPress, style: {
+            width: 280,
+            borderRadius: 16,
+            overflow: "hidden",
+            marginRight: 12,
+            backgroundColor: hasGradient ? "transparent" : theme.bg.card,
+            borderWidth: hasGradient ? 0 : 1,
+            borderColor: theme.border.default,
+            ...theme.shadow.md,
+        }, children: [hasGradient ? (_jsx(GradientSurface, { colors: item.gradient, padding: "none", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } })) : null, _jsxs(View, { style: { padding: 16 }, children: [item.badge ? (_jsx(View, { style: {
+                            alignSelf: "flex-start",
+                            backgroundColor: accent,
+                            borderRadius: 999,
+                            paddingHorizontal: 10,
+                            paddingVertical: 3,
+                            marginBottom: 10,
+                        }, children: _jsx(Typography.Text, { semibold: true, style: { color: "#FFFFFF", fontSize: 11 }, variant: "caption", children: item.badge }) })) : null, _jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [Icon ? (_jsx(View, { style: {
+                                    width: 48,
+                                    height: 48,
+                                    borderRadius: 12,
+                                    backgroundColor: hasGradient ? "rgba(255,255,255,0.15)" : theme.bg.muted,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }, children: _jsx(Icon, { color: hasGradient ? "#FFFFFF" : theme.icon.primary, size: 24 }) })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsx(Typography.Text, { semibold: true, style: { color: textColor }, variant: "subtitle", children: item.title }), item.subtitle ? (_jsx(Typography.Text, { style: { color: subtextColor, marginTop: 2 }, variant: "bodySmall", children: item.subtitle })) : null] })] }), item.ctaLabel ? (_jsx(View, { style: {
+                            marginTop: 14,
+                            alignSelf: "flex-start",
+                            backgroundColor: hasGradient ? "rgba(255,255,255,0.2)" : accent,
+                            borderRadius: 999,
+                            paddingHorizontal: 16,
+                            paddingVertical: 7,
+                        }, children: _jsx(Typography.Text, { semibold: true, style: { color: hasGradient ? "#FFFFFF" : theme.text.onAccent, fontSize: 13 }, variant: "bodySmall", children: item.ctaLabel }) })) : null] })] }));
+}
+/**
+ * Horizontal scrollable row of promotional/announcement cards.
+ * Each card supports gradient surfaces, icon, badge, title, subtitle, and a CTA button.
+ *
+ * Usage:
+ *   <PromoBanner
+ *     title="Destacados"
+ *     items={[
+ *       { id: "1", title: "Nueva ruta", subtitle: "Servicio express", badge: "Nuevo",
+ *         gradient: ["#0D2B1F", "#00C357"], ctaLabel: "Ver más", onPress: ... },
+ *     ]}
+ *   />
+ */
+export function PromoBanner({ items, title }) {
+    const theme = useTheme();
+    return (_jsxs(View, { children: [title ? (_jsx(Typography.Text, { semibold: true, style: { color: theme.text.secondary, marginBottom: 10, paddingHorizontal: 16 }, variant: "caption", children: title.toUpperCase() })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingVertical: 2 }, horizontal: true, showsHorizontalScrollIndicator: false, children: items.map((item) => (_jsx(BannerCard, { item: item }, item.id))) })] }));
+}

package/dist/widgets/PromoModal.d.ts

@@ -0,0 +1,41 @@
+import { ComponentType } from "react";
+export interface PromoModalProps {
+    visible: boolean;
+    onDismiss: () => void;
+    title: string;
+    body?: string;
+    /** Optional icon rendered at the top of the card. */
+    icon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    /** Gradient for the icon header area (top strip). */
+    headerGradient?: readonly [string, string, ...string[]];
+    /** Primary CTA label. */
+    ctaLabel?: string;
+    onPressCta?: () => void;
+    /** Secondary link/dismiss label. Defaults to "Ahora no". */
+    dismissLabel?: string;
+    /** Badge chip text above the title (e.g. "Novedad", "Oferta"). */
+    badge?: string;
+    /** Accent color for the CTA button and badge. */
+    accentColor?: string;
+}
+/**
+ * Bottom-anchored modal for news, promotions, or announcements.
+ * Tapping outside (backdrop) also dismisses it.
+ *
+ * Usage:
+ *   <PromoModal
+ *     visible={showPromo}
+ *     onDismiss={() => setShowPromo(false)}
+ *     title="Nueva función disponible"
+ *     body="Ahora puedes filtrar rutas por color directamente desde el panel principal."
+ *     badge="Novedad"
+ *     headerGradient={["#022B14", "#065E2B"]}
+ *     icon={BellIcon}
+ *     ctaLabel="Explorar"
+ *     onPressCta={handleExplore}
+ *   />
+ */
+export declare function PromoModal({ visible, onDismiss, title, body, icon: Icon, headerGradient, ctaLabel, onPressCta, dismissLabel, badge, accentColor, }: PromoModalProps): import("react").JSX.Element;

package/dist/widgets/PromoModal.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import GradientSurface from "../Display/Display.GradientSurface";
+import { useTheme } from "../theme";
+import { Typography } from "../Typography";
+import { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/**
+ * Bottom-anchored modal for news, promotions, or announcements.
+ * Tapping outside (backdrop) also dismisses it.
+ *
+ * Usage:
+ *   <PromoModal
+ *     visible={showPromo}
+ *     onDismiss={() => setShowPromo(false)}
+ *     title="Nueva función disponible"
+ *     body="Ahora puedes filtrar rutas por color directamente desde el panel principal."
+ *     badge="Novedad"
+ *     headerGradient={["#022B14", "#065E2B"]}
+ *     icon={BellIcon}
+ *     ctaLabel="Explorar"
+ *     onPressCta={handleExplore}
+ *   />
+ */
+export function PromoModal({ visible, onDismiss, title, body, icon: Icon, headerGradient, ctaLabel, onPressCta, dismissLabel = "Ahora no", badge, accentColor, }) {
+    const theme = useTheme();
+    const insets = useSafeAreaInsets();
+    const accent = accentColor ?? theme.accent;
+    return (_jsxs(Modal, { animationType: "fade", onRequestClose: onDismiss, statusBarTranslucent: true, transparent: true, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onDismiss, children: _jsx(View, { style: {
+                        flex: 1,
+                        backgroundColor: "rgba(0,0,0,0.55)",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        paddingHorizontal: 24,
+                        paddingVertical: insets.top + 16,
+                    } }) }), _jsx(View, { pointerEvents: "box-none", style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingHorizontal: 24,
+                }, children: _jsxs(View, { style: {
+                        backgroundColor: theme.bg.card,
+                        borderRadius: 28,
+                        borderWidth: 1,
+                        borderColor: theme.border.default,
+                        width: "100%",
+                        maxWidth: 400,
+                        overflow: "hidden",
+                    }, children: [headerGradient || Icon ? (_jsxs(View, { style: { height: 120, justifyContent: "center", alignItems: "center" }, children: [headerGradient ? (_jsx(GradientSurface, { colors: headerGradient, padding: "none", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } })) : null, Icon ? (_jsx(View, { style: {
+                                        width: 64,
+                                        height: 64,
+                                        borderRadius: 20,
+                                        backgroundColor: "rgba(255,255,255,0.18)",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                    }, children: _jsx(Icon, { color: "#FFFFFF", size: 32 }) })) : null] })) : null, _jsxs(View, { style: { paddingHorizontal: 24, paddingTop: 12, paddingBottom: 8 }, children: [badge ? (_jsx(View, { style: {
+                                        alignSelf: "flex-start",
+                                        backgroundColor: accent,
+                                        borderRadius: 999,
+                                        paddingHorizontal: 12,
+                                        paddingVertical: 4,
+                                        marginBottom: 12,
+                                    }, children: _jsx(Typography.Text, { semibold: true, style: { color: theme.text.onAccent, fontSize: 11 }, variant: "caption", children: badge }) })) : null, _jsx(Typography.Text, { semibold: true, style: { color: theme.text.primary }, variant: "h3", children: title }), body ? (_jsx(Typography.Text, { style: { color: theme.text.secondary, marginTop: 8, lineHeight: 22 }, variant: "body", children: body })) : null] }), _jsxs(View, { style: { paddingHorizontal: 24, paddingTop: 16, gap: 10 }, children: [ctaLabel ? (_jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: () => {
+                                        onPressCta?.();
+                                        onDismiss();
+                                    }, style: {
+                                        backgroundColor: accent,
+                                        borderRadius: 14,
+                                        paddingVertical: 15,
+                                        alignItems: "center",
+                                    }, children: _jsx(Typography.Text, { semibold: true, style: { color: theme.text.onAccent }, variant: "body", children: ctaLabel }) })) : null, _jsx(TouchableOpacity, { activeOpacity: 0.7, onPress: onDismiss, style: { alignItems: "center", paddingVertical: 12 }, children: _jsx(Typography.Text, { style: { color: theme.text.secondary }, variant: "body", children: dismissLabel }) })] })] }) })] }));
+}

package/dist/widgets/QuickActions.d.ts

@@ -0,0 +1,26 @@
+import { ComponentType } from "react";
+export interface QuickActionItem {
+    id: string;
+    label: string;
+    /** Ionicon name — use this OR `customIcon`. */
+    icon?: string;
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    badge?: string | number;
+    onPress?: () => void;
+    /** Circle background color override. Defaults to `theme.bg.muted`. */
+    color?: string;
+}
+export interface QuickActionsProps {
+    items: QuickActionItem[];
+    /** Section heading rendered above the row. */
+    title?: string;
+}
+/**
+ * Horizontal scrollable row of small icon+label shortcuts ("Acciones Rápidas").
+ * Each item renders a 48 px icon circle + optional badge + label below.
+ * Scroll is horizontal and indicator-free for a clean look.
+ */
+export declare function QuickActions({ items, title }: QuickActionsProps): import("react").JSX.Element;

package/dist/widgets/QuickActions.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import { useTheme } from "../theme";
+import { Typography } from "../Typography";
+import { ScrollView, TouchableOpacity, View } from "react-native";
+/**
+ * Horizontal scrollable row of small icon+label shortcuts ("Acciones Rápidas").
+ * Each item renders a 48 px icon circle + optional badge + label below.
+ * Scroll is horizontal and indicator-free for a clean look.
+ */
+export function QuickActions({ items, title }) {
+    const theme = useTheme();
+    return (_jsxs(View, { children: [title ? (_jsx(Typography.Text, { semibold: true, style: { color: theme.text.secondary, marginBottom: 10, paddingHorizontal: 16 }, variant: "caption", children: title.toUpperCase() })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 12, gap: 4 }, horizontal: true, showsHorizontalScrollIndicator: false, children: items.map((item) => (_jsxs(TouchableOpacity, { activeOpacity: 0.7, onPress: item.onPress, style: { alignItems: "center", width: 72, paddingVertical: 4 }, children: [_jsx(View, { style: {
+                                width: 52,
+                                height: 52,
+                                borderRadius: 999,
+                                backgroundColor: item.color ?? theme.bg.muted,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                borderWidth: 1,
+                                borderColor: theme.border.default,
+                            }, children: _jsx(Icon, { color: theme.text.primary, customIcon: item.customIcon, name: item.icon, size: 24, type: item.customIcon ? "custom" : "ionicons" }) }), item.badge != null ? (_jsx(View, { style: {
+                                position: "absolute",
+                                top: 2,
+                                right: 4,
+                                minWidth: 18,
+                                height: 18,
+                                borderRadius: 999,
+                                backgroundColor: theme.danger,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                paddingHorizontal: 4,
+                                borderWidth: 2,
+                                borderColor: theme.bg.card,
+                            }, children: _jsx(Typography.Text, { style: { color: "#FFFFFF", fontSize: 9, lineHeight: 11 }, children: item.badge }) })) : null, _jsx(Typography.Text, { numberOfLines: 2, style: {
+                                color: theme.text.primary,
+                                marginTop: 6,
+                                textAlign: "center",
+                                fontSize: 11,
+                            }, variant: "caption", children: item.label })] }, item.id))) })] }));
+}

package/dist/widgets/index.d.ts

@@ -2,6 +2,16 @@ 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 type { MenuGridItem, MenuGridProps } from "../widgets/MenuGrid";
+/** @deprecated Renamed to `MenuGridItem`. */
+export type { MenuGridItem as MenuItem } from "../widgets/MenuGrid";
 export { MenuGrid } from "../widgets/MenuGrid";
+export type { MenuSectionProps } from "../widgets/MenuSection";
+export { MenuSection } from "../widgets/MenuSection";
+export type { PromoBannerItem, PromoBannerProps, } from "../widgets/PromoBanner";
+export { PromoBanner } from "../widgets/PromoBanner";
+export type { PromoModalProps } from "../widgets/PromoModal";
+export { PromoModal } from "../widgets/PromoModal";
+export type { QuickActionItem, QuickActionsProps, } from "../widgets/QuickActions";
+export { QuickActions } from "../widgets/QuickActions";
 export { TimeZoneSelector } from "../widgets/TimeZoneSelector";

package/dist/widgets/index.js

@@ -3,4 +3,8 @@ export { default as GeoPermissionCard } from "../widgets/GeoPermissionCard";
 export { HomeHeader } from "../widgets/HomeHeader";
 export { MenuCard } from "../widgets/MenuCard";
 export { MenuGrid } from "../widgets/MenuGrid";
+export { MenuSection } from "../widgets/MenuSection";
+export { PromoBanner } from "../widgets/PromoBanner";
+export { PromoModal } from "../widgets/PromoModal";
+export { QuickActions } from "../widgets/QuickActions";
 export { TimeZoneSelector } from "../widgets/TimeZoneSelector";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -18,6 +18,7 @@
     "./Dialog": "./dist/Dialog/index.js",
     "./Dialog/BottomSheet": "./dist/Dialog/BottomSheet/index.js",
     "./Dialog/Sheet": "./dist/Dialog/Dialog.Sheet.js",
+    "./Actions": "./dist/Actions/index.js",
     "./Display": "./dist/Display/index.js",
     "./Feedback": "./dist/Feedback/index.js",
     "./Form": "./dist/Form/index.js",