@sincpro/mobile-ui 0.7.1 → 1.0.1

package/dist/theme/typography.js

@@ -1,29 +1,28 @@
-import { FiraCode_400Regular, FiraCode_500Medium } from "@expo-google-fonts/fira-code";
-import { Inter_300Light, Inter_400Regular, Inter_500Medium, Inter_600SemiBold, Inter_800ExtraBold, useFonts, } from "@expo-google-fonts/inter";
+import { IBMPlexMono_400Regular, IBMPlexMono_500Medium, } from "@expo-google-fonts/ibm-plex-mono";
+import { IBMPlexSans_300Light, IBMPlexSans_400Regular, IBMPlexSans_500Medium, IBMPlexSans_600SemiBold, IBMPlexSans_700Bold, useFonts, } from "@expo-google-fonts/ibm-plex-sans";
 const DEFAULT_FONT_FAMILIES = {
-    light: "Inter_300Light",
-    regular: "Inter_400Regular",
-    medium: "Inter_500Medium",
-    semiBold: "Inter_600SemiBold",
-    extraBold: "Inter_800ExtraBold",
-    mono: "FiraCode_400Regular",
-    monoMedium: "FiraCode_500Medium",
-    // Title roles default to Inter until the app wires its brand typeface via configureFonts.
-    titleRegular: "Inter_400Regular",
-    titleMedium: "Inter_500Medium",
-    title: "Inter_600SemiBold",
-    titleBlack: "Inter_800ExtraBold",
+    light: "IBMPlexSans_300Light",
+    regular: "IBMPlexSans_400Regular",
+    medium: "IBMPlexSans_500Medium",
+    semiBold: "IBMPlexSans_600SemiBold",
+    extraBold: "IBMPlexSans_700Bold",
+    mono: "IBMPlexMono_400Regular",
+    monoMedium: "IBMPlexMono_500Medium",
+    titleRegular: "IBMPlexSans_400Regular",
+    titleMedium: "IBMPlexSans_500Medium",
+    title: "IBMPlexSans_600SemiBold",
+    titleBlack: "IBMPlexSans_700Bold",
 };
 export const fontFamilies = { ...DEFAULT_FONT_FAMILIES };
 /**
  * Override DS font family names (role → already-loaded family name).
  * Mutates the singleton in-place so components pick up the change at render time.
- * Example: `configureFonts({ title: "Satoshi-Bold", titleBlack: "Satoshi-Black" })`.
+ * Example: `configureFonts({ title: "YourBrandTitle-Bold", titleBlack: "YourBrandDisplay-Black" })`.
  */
 export function configureFonts(overrides) {
     Object.assign(fontFamilies, overrides);
 }
-/** Reset all font roles to the defaults (Inter + Fira Code). Useful in tests and stories. */
+/** Reset all font roles to the defaults (IBM Plex Sans + IBM Plex Mono). Useful in tests and stories. */
 export function resetFonts() {
     Object.assign(fontFamilies, DEFAULT_FONT_FAMILIES);
 }
@@ -75,7 +74,7 @@ export const letterSpacing = {
 };
 /* -------------------- Typography Variants -------------------- */
 export const typographyVariants = {
-    // Display (Satoshi Black — brand character)
+    // Display (titleBlack role — typically the brand display typeface)
     display: {
         fontSize: fontSizes["7xl"],
         fontFamily: fontFamilies.titleBlack,
@@ -83,7 +82,7 @@ export const typographyVariants = {
         lineHeight: fontSizes["7xl"] * lineHeights.tight,
         letterSpacing: letterSpacing.tight,
     },
-    // Headings (Satoshi Bold)
+    // Headings (title role)
     h1: {
         fontSize: fontSizes["5xl"],
         fontFamily: fontFamilies.title,
@@ -290,18 +289,17 @@ export const createCustomTextStyle = (fontSize, fontFamily, options) => {
  * depending directly on expo-font — it's already a transitive dep via this package. */
 export { useFonts };
 /* -------------------- Font Loader (optional, convenience) ------------------
- * Loads the recommended base fonts (Inter + Fira Code) declared as peer deps.
- * The "title" role (e.g. Satoshi) is loaded and wired by the app/Storybook
- * via `configureFonts` — the DS never bundles font files. */
+ * Loads IBM Plex Sans and IBM Plex Mono, the same faces web UI uses.
+ * An app can still point a role at another loaded family with `configureFonts`. */
 export const useAppFonts = () => {
     const [loaded] = useFonts({
-        FiraCode_400Regular,
-        FiraCode_500Medium,
-        Inter_300Light,
-        Inter_400Regular,
-        Inter_500Medium,
-        Inter_600SemiBold,
-        Inter_800ExtraBold,
+        IBMPlexMono_400Regular,
+        IBMPlexMono_500Medium,
+        IBMPlexSans_300Light,
+        IBMPlexSans_400Regular,
+        IBMPlexSans_500Medium,
+        IBMPlexSans_600SemiBold,
+        IBMPlexSans_700Bold,
     });
     return loaded;
 };

package/dist/theme/useTheme.d.ts

@@ -1,3 +1,3 @@
-import type { ThemeTokens } from "../theme/types";
+import type { ThemeTokens } from "./types.js";
 export declare function useTheme(): ThemeTokens;
 export declare const theme: ThemeTokens;

package/dist/theme/useTheme.js

@@ -1,4 +1,4 @@
-import { getActiveTheme, getThemeVersion, subscribeTheme, } from "../theme/active";
+import { getActiveTheme, getThemeVersion, subscribeTheme, } from "./active.js";
 import { useSyncExternalStore } from "react";
 export function useTheme() {
     useSyncExternalStore(subscribeTheme, getThemeVersion, getThemeVersion);

package/dist/theme/validate.d.ts

@@ -0,0 +1,16 @@
+import type { ThemeTokens } from "./types.js";
+type Issue = {
+    path: string;
+    message: string;
+};
+/**
+ * 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 declare function validateTheme(theme: Partial<ThemeTokens>): Issue[];
+export {};

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