@sincpro/mobile-ui 0.7.2 → 1.0.1

package/dist/theme/validate.js

@@ -0,0 +1,200 @@
+import { contrastRatio, resolveOnColor } from "./contrast.js";
+/**
+ * Lightweight sanity checks on a theme. Returns a list of issues; empty array means OK.
+ * Not a hard validator — we don't want to over-constrain creative themes — just guards
+ * against the common silent failures (typos in hex, negative sizes, missing primary,
+ * WCAG P0 contrast violations on the key on-color pairs, semantic token collisions).
+ *
+ * Triggered automatically by `setActiveTheme` in dev mode (skipped under Node, since
+ * tests intentionally pass partial themes). Can also be called directly.
+ */
+export function validateTheme(theme) {
+    const issues = [];
+    if (typeof theme.name !== "string" || theme.name.trim() === "") {
+        issues.push({ path: "name", message: "Theme must have a non-empty `name`." });
+    }
+    if (!isHex(theme.primary)) {
+        issues.push({ path: "primary", message: `Invalid hex color: ${String(theme.primary)}` });
+    }
+    if (!isHex(theme.accent)) {
+        issues.push({ path: "accent", message: `Invalid hex color: ${String(theme.accent)}` });
+    }
+    if (!isHex(theme.bg?.page)) {
+        issues.push({ path: "bg.page", message: `Invalid hex color: ${String(theme.bg?.page)}` });
+    }
+    if (!isHex(theme.text?.primary)) {
+        issues.push({
+            path: "text.primary",
+            message: `Invalid hex color: ${String(theme.text?.primary)}`,
+        });
+    }
+    if (theme.pattern) {
+        if (!isFiniteSize(theme.pattern.size)) {
+            issues.push({
+                path: "pattern.size",
+                message: `Tile size must be > 0 (got ${String(theme.pattern.size)}).`,
+            });
+        }
+    }
+    if (theme.shadow) {
+        issues.push(...validateShadow("shadow.sm", theme.shadow.sm));
+        issues.push(...validateShadow("shadow.md", theme.shadow.md));
+        issues.push(...validateShadow("shadow.lg", theme.shadow.lg));
+    }
+    issues.push(...validateContrast(theme));
+    issues.push(...validateSemanticDistinct(theme));
+    return issues;
+}
+function isHex(value) {
+    return typeof value === "string" && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value.trim());
+}
+function isFiniteSize(n) {
+    return typeof n === "number" && Number.isFinite(n) && n > 0;
+}
+function validateShadow(path, s) {
+    const out = [];
+    if (typeof s.shadowColor !== "string" || s.shadowColor.trim() === "") {
+        out.push({ path: `${path}.shadowColor`, message: "shadowColor must be a string." });
+    }
+    if (typeof s.shadowOpacity !== "number" || s.shadowOpacity < 0 || s.shadowOpacity > 1) {
+        out.push({
+            path: `${path}.shadowOpacity`,
+            message: `shadowOpacity must be in [0, 1] (got ${s.shadowOpacity}).`,
+        });
+    }
+    return out;
+}
+/**
+ * WCAG 2.1 contrast validation. Checks the P0 on-color pairs that every consumer
+ * relies on (CTA text/bg, focus ring, body text on surfaces). Flags any pair below the
+ * AA minimum (3:1 for UI/non-text, 4.5:1 for body text). Returns warnings as Issue[]
+ * entries — never throws — so the dev-mode warning stays non-fatal.
+ */
+function validateContrast(theme) {
+    const issues = [];
+    const checks = [
+        {
+            fg: theme.text?.onPrimary,
+            bg: theme.primary,
+            min: 4.5,
+            label: "text.onPrimary on primary (CTA)",
+        },
+        {
+            fg: theme.text?.onSecondary,
+            bg: theme.secondary,
+            min: 4.5,
+            label: "text.onSecondary on secondary",
+        },
+        {
+            fg: theme.text?.onAccent,
+            bg: theme.accent,
+            min: 4.5,
+            label: "text.onAccent on accent",
+        },
+        { fg: theme.border?.focus, bg: theme.bg?.page, min: 3, label: "border.focus on bg.page" },
+        { fg: theme.border?.focus, bg: theme.bg?.card, min: 3, label: "border.focus on bg.card" },
+        {
+            fg: theme.text?.onDanger,
+            bg: theme.danger,
+            min: 4.5,
+            label: "text.onDanger on danger",
+        },
+        {
+            fg: theme.text?.onSuccess,
+            bg: theme.success,
+            min: 4.5,
+            label: "text.onSuccess on success",
+        },
+        {
+            fg: theme.text?.accent,
+            bg: theme.bg?.card,
+            min: 4.5,
+            label: "text.accent on bg.card (brand text)",
+        },
+        {
+            fg: theme.text?.accent,
+            bg: theme.bg?.page,
+            min: 4.5,
+            label: "text.accent on bg.page (brand text)",
+        },
+        {
+            fg: theme.container?.onPrimary,
+            bg: theme.container?.primary,
+            min: 4.5,
+            label: "container.onPrimary on container.primary",
+        },
+        {
+            fg: theme.container?.onSuccess,
+            bg: theme.container?.success,
+            min: 4.5,
+            label: "container.onSuccess on container.success",
+        },
+        {
+            fg: theme.container?.onDanger,
+            bg: theme.container?.danger,
+            min: 4.5,
+            label: "container.onDanger on container.danger",
+        },
+    ];
+    for (const c of checks) {
+        if (!isHex(c.fg) || !isHex(c.bg))
+            continue;
+        const ratio = contrastRatio(c.fg, c.bg);
+        if (ratio < c.min) {
+            let message = `Contrast ratio ${ratio.toFixed(2)}:1 is below WCAG AA minimum ${c.min}:1 for body/UI text.`;
+            if (c.label.includes("onPrimary") && isHex(theme.primary)) {
+                const suggested = resolveOnColor(theme.primary);
+                message += ` Use resolveOnColor(primary) → ${suggested}.`;
+            }
+            issues.push({ path: c.label, message });
+        }
+    }
+    return issues;
+}
+/** Roles that must stay visually distinct for maintainable state semantics. */
+function validateSemanticDistinct(theme) {
+    const issues = [];
+    const pairs = [
+        ["bg.disabled vs bg.muted", theme.bg?.disabled, theme.bg?.muted],
+        ["text.disabled vs text.muted", theme.text?.disabled, theme.text?.muted],
+        ["icon.disabled vs icon.secondary", theme.icon?.disabled, theme.icon?.secondary],
+    ];
+    for (const [label, a, b] of pairs) {
+        if (!isHex(a) || !isHex(b))
+            continue;
+        if (a.trim().toLowerCase() === b.trim().toLowerCase()) {
+            issues.push({
+                path: label,
+                message: `Tokens share the same hex (${a}). Keep roles distinct so disabled/muted states stay maintainable.`,
+            });
+        }
+    }
+    if (theme.state) {
+        for (const key of ["hover", "press", "focus", "drag"]) {
+            const v = theme.state[key];
+            if (typeof v !== "number" || v < 0 || v > 1) {
+                issues.push({
+                    path: `state.${key}`,
+                    message: `State layer opacity must be in [0, 1] (got ${String(v)}).`,
+                });
+            }
+        }
+    }
+    if (theme.material) {
+        if (typeof theme.material.opacity === "number" &&
+            (theme.material.opacity < 0 || theme.material.opacity > 1)) {
+            issues.push({
+                path: "material.opacity",
+                message: `material.opacity must be in [0, 1] (got ${theme.material.opacity}).`,
+            });
+        }
+        if (typeof theme.material.blur === "number" &&
+            (!Number.isFinite(theme.material.blur) || theme.material.blur < 0)) {
+            issues.push({
+                path: "material.blur",
+                message: `material.blur must be ≥ 0 (got ${theme.material.blur}).`,
+            });
+        }
+    }
+    return issues;
+}

package/dist/tokens/index.d.ts

@@ -1,2 +1,2 @@
-export { motion } from "../tokens/motion";
-export { duration, type DurationToken, easing, type EasingToken, spring, type SpringToken, } from "../tokens/motion";
+export { motion } from "./motion.js";
+export { duration, type DurationToken, easing, type EasingToken, spring, type SpringToken, } from "./motion.js";

package/dist/tokens/index.js

@@ -1,2 +1,2 @@
-export { motion } from "../tokens/motion";
-export { duration, easing, spring, } from "../tokens/motion";
+export { motion } from "./motion.js";
+export { duration, easing, spring, } from "./motion.js";

package/dist/views/AppSplashView.d.ts

@@ -1,5 +1,5 @@
-import { type SpinnerVariant } from "../Feedback/Feedback.Spinner";
-import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
+import { type SpinnerVariant } from "../Feedback/Feedback.Spinner.js";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import type { ReactNode } from "react";
 import { type ImageSourcePropType, type ViewStyle } from "react-native";
 export interface AppSplashViewProps {

package/dist/views/AppSplashView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientSurface from "../Display/Display.GradientSurface";
-import { Pattern } from "../Display/Display.Pattern";
-import Spinner from "../Feedback/Feedback.Spinner";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import { Pattern } from "../Display/Display.Pattern.js";
+import Spinner from "../Feedback/Feedback.Spinner.js";
 import { Image, View } from "react-native";
 export function AppSplashView({ background, logo, loadingVariant = "dots", loader, style, }) {
     return (_jsxs(GradientSurface, { className: "flex-1", colors: background?.colors, end: background?.end, padding: "none", preset: background?.surface ?? "night-green", radius: "none", start: background?.start, style: { flex: 1, ...style }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _jsxs(View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: [logo ? (_jsx(Image, { source: logo, style: { width: 140, height: 140, resizeMode: "contain", marginBottom: 40 } })) : null, loader ?? (_jsx(Spinner, { color: "rgba(255,255,255,0.9)", size: "large", variant: loadingVariant }))] })] }));

package/dist/views/AuthFormView.d.ts

@@ -1,4 +1,4 @@
-import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 interface AuthFormProps {

package/dist/views/AuthFormView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import AuthContainer from "../layouts/AuthContainer";
-import { Typography } from "../Typography";
+import { Display } from "../Display/index.js";
+import AuthContainer from "../layouts/AuthContainer.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 const Logo = Display.Logo;
 const Text = Typography.Text;

package/dist/views/FormViewV2.d.ts

@@ -1,5 +1,5 @@
-import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
-import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
+import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl.js";
 import React, { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 interface FormViewProps<T> {

package/dist/views/FormViewV2.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { ErrorBoundary, Feedback } from "../Feedback";
-import { useBottomInset } from "../layouts/BottomInset";
-import Container from "../layouts/Container";
-import { AppBar } from "../Navigation/Navigation.AppBar";
-import { MenuSection } from "../Navigation/Navigation.MenuSection";
-import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
-import { useTheme } from "../theme";
-import { FormViewProvider, useFormView } from "../views/FormViewV2.context";
+import { Display } from "../Display/index.js";
+import { ErrorBoundary, Feedback } from "../Feedback/index.js";
+import { useBottomInset } from "../layouts/BottomInset.js";
+import Container from "../layouts/Container.js";
+import { AppBar } from "../Navigation/Navigation.AppBar.js";
+import { MenuSection } from "../Navigation/Navigation.MenuSection.js";
+import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl.js";
+import { useTheme } from "../theme/index.js";
+import { FormViewProvider, useFormView } from "./FormViewV2.context.js";
 import React from "react";
 import { RefreshControl, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller";

package/dist/views/ListViewV2.d.ts

@@ -1,6 +1,6 @@
-import { type SearchHistoryProps } from "../Display/Display.SearchHistory";
-import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
-import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
+import { type SearchHistoryProps } from "../Display/Display.SearchHistory.js";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
+import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl.js";
 import React, { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 interface ListViewProps<T> {

package/dist/views/ListViewV2.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import SearchHistory from "../Display/Display.SearchHistory";
-import { ErrorBoundary, Feedback } from "../Feedback";
-import { useBottomInset } from "../layouts/BottomInset";
-import Container from "../layouts/Container";
-import { Navigation } from "../Navigation";
-import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
-import { useTheme } 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 { Display } from "../Display/index.js";
+import SearchHistory from "../Display/Display.SearchHistory.js";
+import { ErrorBoundary, Feedback } from "../Feedback/index.js";
+import { useBottomInset } from "../layouts/BottomInset.js";
+import Container from "../layouts/Container.js";
+import { Navigation } from "../Navigation/index.js";
+import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl.js";
+import { useTheme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { ListViewProvider, useListView } from "./ListViewV2.context.js";
+import { toRowItems } from "./types/IListView.js";
 import { 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, onLoadMore, loadingMore = false, backgroundColor, withContainer = true, children, }) {
@@ -69,12 +69,12 @@ function HeaderSearchHistory(props) {
 function HeaderFilters({ children }) {
     return _jsx(View, { className: "px-4 py-2 items-center", children: children });
 }
-// Modern filter pills (2026): rounded-full, active = accent (green), inactive = muted track.
+// Active filter uses the action color. The capsule is a pill; the rest of the chrome is not.
 const filterChip = tv({
     base: "py-1.5 px-3.5 items-center justify-center rounded-full",
     variants: {
         active: {
-            true: "bg-accent",
+            true: "bg-primary",
             false: "bg-bg-muted",
         },
     },
@@ -83,7 +83,7 @@ const filterChip = tv({
 const filterChipText = tv({
     variants: {
         active: {
-            true: "text-text-inverse font-semibold",
+            true: "text-text-on-primary font-semibold",
             false: "text-text-secondary",
         },
     },
@@ -153,7 +153,7 @@ function ContentList({ children, contentWithMargin, }) {
             marginTop: 2,
             paddingHorizontal: contentWithMargin ? 4 : 0,
             backgroundColor: theme.bg.page,
-        }, children: _jsx(FlatList, { contentContainerStyle: bottomInset ? { paddingBottom: bottomInset } : undefined, data: rowItems, keyExtractor: (item) => String(item.index), ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : null, onEndReached: onLoadMore ? () => onLoadMore() : undefined, onEndReachedThreshold: 0.5, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false }) }));
+        }, children: _jsx(FlatList, { contentContainerStyle: bottomInset ? { paddingBottom: bottomInset } : undefined, data: rowItems, keyExtractor: (item) => String(item.index), ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : undefined, onEndReached: onLoadMore ? () => onLoadMore() : undefined, onEndReachedThreshold: 0.5, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false }) }));
 }
 function Footer({ children }) {
     const { items } = useListView();

package/dist/views/Wizard/Wizard.context.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { ErrorBoundary } from "../../Feedback";
+import { ErrorBoundary } from "../../Feedback/index.js";
 import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { ActivityIndicator, Text, View } from "react-native";
 const WizardContext = createContext(null);

package/dist/views/Wizard/Wizard.d.ts

@@ -1,4 +1,4 @@
-import type { WizardContextValue, WizardProviderProps, WizardStepId } from "../../views/Wizard/Wizard.context";
+import type { WizardContextValue, WizardProviderProps, WizardStepId } from "./Wizard.context.js";
 import type { FC, ReactNode } from "react";
 export interface WizardStepGuard {
     canEnter?: () => boolean | Promise<boolean>;

package/dist/views/Wizard/Wizard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { useWizard, WizardProvider } from "../../views/Wizard/Wizard.context";
+import { useWizard, WizardProvider } from "./Wizard.context.js";
 import { useEffect } from "react";
 import { TouchableOpacity } from "react-native";
 const WizardRoot = (props) => {

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

@@ -1,4 +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";
+export type { WizardBackProps, WizardGoProps, WizardGuardProps, WizardStepGuard, WizardStepLifecycle, WizardStepProps, } from "./Wizard.js";
+export { Wizard } from "./Wizard.js";
+export type { WizardContextValue, WizardProviderProps, WizardStepId, } from "./Wizard.context.js";
+export { useWizard } from "./Wizard.context.js";

package/dist/views/Wizard/index.js

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

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

@@ -1,4 +1,4 @@
-import { UIItem } from "../../views/types/UIItem";
+import { UIItem } from "./UIItem.js";
 import { ReactNode } from "react";
 export interface IFormView<T> extends UIItem {
     name: string;

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

@@ -1,4 +1,4 @@
-import { UICollectionItem, UIItem } from "../../views/types/UIItem";
+import { UICollectionItem, UIItem } from "./UIItem.js";
 import { ReactNode } from "react";
 export type IRowItem<T> = T & UIItem & {
     id: string | number;

package/dist/widgets/CircleButton.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.CircleButton` instead. */
-export type { CircleButtonProps } from "../Display/Display.CircleButton";
-export { CircleButton } from "../Display/Display.CircleButton";
+export type { CircleButtonProps } from "../Display/Display.CircleButton.js";
+export { CircleButton } from "../Display/Display.CircleButton.js";

package/dist/widgets/CircleButton.js

@@ -1 +1 @@
-export { CircleButton } from "../Display/Display.CircleButton";
+export { CircleButton } from "../Display/Display.CircleButton.js";

package/dist/widgets/GeoPermissionCard.js

@@ -1,7 +1,7 @@
 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 { Display, Form } from "../index.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 import { tv } from "tailwind-variants";
 const statusTextVariants = tv({

package/dist/widgets/HomeHeader.js

@@ -1,7 +1,7 @@
 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 { Display, Typography } from "../index.js";
+import GradientContainer from "../layouts/GradientContainer.js";
+import { theme } from "../theme/index.js";
 import { TouchableOpacity, View } from "react-native";
 /**
  * @deprecated Legacy style (gradient). For new top bars use `Navigation.AppBar`.

package/dist/widgets/JSONViewer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { ThemedActivityIndicator } from "../theme";
-import { fontFamilies } from "../theme/typography";
+import { ThemedActivityIndicator } from "../theme/index.js";
+import { fontFamilies } from "../theme/typography.js";
 import { useEffect, useMemo, useState } from "react";
 import { Text, View } from "react-native";
 const parseDeepJson = (value) => {

package/dist/widgets/MenuCard.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.MenuCard` instead. */
-export type { MenuCardProps } from "../Display/Display.MenuCard";
-export { MenuCard } from "../Display/Display.MenuCard";
+export type { MenuCardProps } from "../Display/Display.MenuCard.js";
+export { MenuCard } from "../Display/Display.MenuCard.js";

package/dist/widgets/MenuCard.js

@@ -1 +1 @@
-export { MenuCard } from "../Display/Display.MenuCard";
+export { MenuCard } from "../Display/Display.MenuCard.js";

package/dist/widgets/MenuGrid.d.ts

@@ -1,5 +1,5 @@
 /** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.MenuGrid` instead. */
-export type { MenuGridItem, MenuGridProps, } from "../Display/Display.MenuGrid";
-export { MenuGrid } from "../Display/Display.MenuGrid";
+export type { MenuGridItem, MenuGridProps, } from "../Display/Display.MenuGrid.js";
+export { MenuGrid } from "../Display/Display.MenuGrid.js";
 /** @deprecated Renamed to `MenuGridItem`. */
-export type { MenuGridItem as MenuItem } from "../Display/Display.MenuGrid";
+export type { MenuGridItem as MenuItem } from "../Display/Display.MenuGrid.js";

package/dist/widgets/MenuGrid.js

@@ -1 +1 @@
-export { MenuGrid } from "../Display/Display.MenuGrid";
+export { MenuGrid } from "../Display/Display.MenuGrid.js";

package/dist/widgets/MenuSection.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Import from `@sincpro/mobile-ui/Navigation` → `Navigation.MenuSection` instead. */
-export type { MenuSectionProps } from "../Navigation/Navigation.MenuSection";
-export { MenuSection } from "../Navigation/Navigation.MenuSection";
+export type { MenuSectionProps } from "../Navigation/Navigation.MenuSection.js";
+export { MenuSection } from "../Navigation/Navigation.MenuSection.js";

package/dist/widgets/MenuSection.js

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

package/dist/widgets/PromoBanner.js

@@ -1,7 +1,7 @@
 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 GradientSurface from "../Display/Display.GradientSurface.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 function BannerCard({ item }) {
     const theme = useTheme();

package/dist/widgets/PromoModal.js

@@ -1,7 +1,7 @@
 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 GradientSurface from "../Display/Display.GradientSurface.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**

package/dist/widgets/QuickActions.js

@@ -1,7 +1,7 @@
 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 Icon from "../Display/Display.Icon.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 /**
  * Horizontal scrollable row of small icon+label shortcuts ("Acciones Rápidas").

package/dist/widgets/ScreenHeader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientContainer from "../layouts/GradientContainer";
-import { Navigation } from "../Navigation";
+import GradientContainer from "../layouts/GradientContainer.js";
+import { Navigation } from "../Navigation/index.js";
 import { View } from "react-native";
 const Header = Navigation.Header;
 const HeaderToolbar = Navigation.HeaderToolbar;

package/dist/widgets/TimeZoneSelector.d.ts

@@ -1,4 +1,4 @@
-import { TimezoneLocale } from "../utils/timezone";
+import { TimezoneLocale } from "../utils/timezone.js";
 interface TimeZoneSelectorProps {
     onSelect?: (tz: TimezoneLocale) => void;
     timezone?: string | null;

package/dist/widgets/TimeZoneSelector.js

@@ -1,8 +1,8 @@
 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 { Display, Form } from "../index.js";
+import { theme } from "../theme/useTheme.js";
+import { Typography } from "../Typography/index.js";
+import { TimeZoneSelectorModal } from "./TimeZoneSelectorModal.js";
 import { useState } from "react";
 import { View } from "react-native";
 /**

package/dist/widgets/TimeZoneSelectorModal.d.ts

@@ -1,4 +1,4 @@
-import { TimezoneLocale } from "../utils/timezone";
+import { TimezoneLocale } from "../utils/timezone.js";
 interface TimeZoneSelectorModalProps {
     visible: boolean;
     onClose: () => void;

package/dist/widgets/TimeZoneSelectorModal.js

@@ -1,8 +1,8 @@
 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 { BottomSheet } from "../Dialog/BottomSheet/index.js";
+import { Display, Form } from "../index.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useMemo, useState } from "react";
 import { FlatList, TextInput, TouchableOpacity, View } from "react-native";
 const TIMEZONES_LOCALES = {
@@ -57,6 +57,6 @@ function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, })
             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-text-secondary text-xs", children: "Selecciona tu zona horaria" })] }), _jsx(View, { className: "px-5 pb-3", children: _jsx(TextInput, { className: "bg-bg-muted 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" }) }))] })] }));
+    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-text-secondary text-xs", children: "Selecciona tu zona horaria" })] }), _jsx(View, { className: "px-5 pb-3", children: _jsx(TextInput, { className: "bg-bg-muted px-4 py-3 rounded-xl", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, underlineColorAndroid: "transparent", 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 };