@sincpro/mobile-ui 0.7.2 → 1.1.0

package/dist/theme/typography.js

@@ -1,32 +1,42 @@
-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);
 }
+export function resolveTextFontFamily(variant, bold = false, semibold = false) {
+    const variantFamily = fontFamilies[variantFontRole[variant]] ?? typographyVariants[variant].fontFamily;
+    const isBrandedFace = !variantFamily.startsWith("Inter_") && !variantFamily.startsWith("IBMPlexSans_");
+    return isBrandedFace
+        ? variantFamily
+        : bold
+            ? fontFamilies.extraBold
+            : semibold
+                ? fontFamilies.semiBold
+                : variantFamily;
+}
 export const fontWeights = {
     light: "300",
     regular: "400",
@@ -75,7 +85,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 +93,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,
@@ -127,6 +137,13 @@ export const typographyVariants = {
         letterSpacing: letterSpacing.normal,
     },
     // Body
+    bodyReadable: {
+        fontSize: 17,
+        fontFamily: fontFamilies.regular,
+        fontWeight: fontWeights.regular,
+        lineHeight: 17 * lineHeights.normal,
+        letterSpacing: letterSpacing.normal,
+    },
     bodyLarge: {
         fontSize: fontSizes.lg,
         fontFamily: fontFamilies.regular,
@@ -252,6 +269,7 @@ export const variantFontRole = {
     h4: "medium",
     h5: "medium",
     h6: "medium",
+    bodyReadable: "regular",
     bodyLarge: "regular",
     body: "regular",
     bodySmall: "regular",
@@ -290,18 +308,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/utils/criteria.d.ts

@@ -0,0 +1,56 @@
+export type CriteriaValue = string | number | boolean;
+export interface CriteriaOperator {
+    id: string;
+    label: string;
+    arity: "none" | "one" | "range";
+}
+export interface CriteriaField {
+    id: string;
+    label: string;
+    type: "text" | "number" | "date" | "choice";
+    operators: readonly CriteriaOperator[];
+    options?: readonly {
+        label: string;
+        value: CriteriaValue;
+    }[];
+}
+export interface CriteriaCondition {
+    kind: "condition";
+    field: string;
+    operator: string;
+    values: readonly CriteriaValue[];
+}
+export interface CriteriaGroup {
+    kind: "group";
+    join: "all" | "any" | "none";
+    children: readonly CriteriaNode[];
+}
+export type CriteriaNode = CriteriaCondition | CriteriaGroup;
+export interface CollectionSort {
+    field: string;
+    direction: "asc" | "desc";
+}
+export interface CollectionQuery {
+    search: string;
+    filter: CriteriaGroup;
+    sort: readonly CollectionSort[];
+    groupBy: readonly string[];
+}
+export interface CollectionField {
+    id: string;
+    label: string;
+    ascLabel?: string;
+    descLabel?: string;
+}
+export interface SavedCollectionQuery {
+    id: string;
+    label: string;
+    query: CollectionQuery;
+}
+export declare function parseCriteriaDate(value: CriteriaValue | undefined): Date | null;
+export declare function criteriaAt(root: CriteriaNode, path: readonly number[]): CriteriaNode;
+export declare function replaceCriteria(root: CriteriaGroup, path: readonly number[], replacement: CriteriaNode | null): CriteriaGroup;
+export declare function describeCriteria(node: CriteriaNode, fields: readonly CriteriaField[]): string;
+export declare function validateCondition(condition: CriteriaCondition, fields: readonly CriteriaField[]): string | undefined;
+export declare function validateCriteria(group: CriteriaGroup, fields: readonly CriteriaField[]): string | undefined;
+export declare function moveCollectionEntry<T>(items: readonly T[], index: number, direction: -1 | 1): T[];

package/dist/utils/criteria.js

@@ -0,0 +1,99 @@
+export function parseCriteriaDate(value) {
+    if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value))
+        return null;
+    const date = new Date(`${value}T00:00:00Z`);
+    if (!Number.isFinite(date.getTime()) || date.toISOString().slice(0, 10) !== value)
+        return null;
+    return new Date(`${value}T12:00:00`);
+}
+export function criteriaAt(root, path) {
+    let node = root;
+    for (const index of path) {
+        if (node.kind !== "group" || !node.children[index])
+            throw new Error("Invalid criteria path");
+        node = node.children[index];
+    }
+    return node;
+}
+export function replaceCriteria(root, path, replacement) {
+    if (path.length === 0) {
+        if (replacement?.kind !== "group")
+            throw new Error("Criteria root must remain a group");
+        return replacement;
+    }
+    const [index, ...rest] = path;
+    const child = root.children[index];
+    if (!child)
+        throw new Error("Invalid criteria path");
+    if (rest.length && child.kind !== "group")
+        throw new Error("Invalid criteria path");
+    const next = rest.length && child.kind === "group"
+        ? replaceCriteria(child, rest, replacement)
+        : replacement;
+    return {
+        ...root,
+        children: root.children.flatMap((item, position) => position !== index ? [item] : next ? [next] : []),
+    };
+}
+export function describeCriteria(node, fields) {
+    if (node.kind === "group") {
+        if (!node.children.length)
+            return "Sin condiciones";
+        const join = { all: "Todas", any: "Cualquiera", none: "Ninguna" }[node.join];
+        return `${join}: (${node.children.map((child) => describeCriteria(child, fields)).join("; ")})`;
+    }
+    const field = fields.find((item) => item.id === node.field);
+    const operator = field?.operators.find((item) => item.id === node.operator);
+    const values = node.values.map((value) => field?.options?.find((option) => option.value === value)?.label ?? String(value));
+    return `${field?.label ?? node.field} ${operator?.label ?? node.operator}${values.length ? ` ${values.join(" — ")}` : ""}`;
+}
+export function validateCondition(condition, fields) {
+    const field = fields.find((item) => item.id === condition.field);
+    if (!field)
+        return "El campo ya no está disponible.";
+    const operator = field.operators.find((item) => item.id === condition.operator);
+    if (!operator)
+        return "El operador no está disponible para este campo.";
+    const count = { none: 0, one: 1, range: 2 }[operator.arity];
+    if (condition.values.length !== count)
+        return "Completa los valores de la condición.";
+    for (const value of condition.values) {
+        if (field.type === "number" && (typeof value !== "number" || !Number.isFinite(value)))
+            return "Introduce un número válido.";
+        if (field.type === "text" && (typeof value !== "string" || !value.trim()))
+            return "Introduce un texto.";
+        if (field.type === "date" && !parseCriteriaDate(value))
+            return "Introduce una fecha válida (AAAA-MM-DD).";
+        if (field.type === "choice" && !field.options?.some((option) => option.value === value))
+            return "Selecciona un valor disponible.";
+    }
+    if (operator.arity === "range" &&
+        field.type === "number" &&
+        Number(condition.values[0]) > Number(condition.values[1]))
+        return "El inicio no puede superar el final.";
+    if (operator.arity === "range" &&
+        field.type === "date" &&
+        String(condition.values[0]) > String(condition.values[1]))
+        return "El inicio no puede superar el final.";
+    return undefined;
+}
+export function validateCriteria(group, fields) {
+    for (const child of group.children) {
+        if (child.kind === "group" && !child.children.length)
+            return "Completa o elimina el grupo vacío.";
+        const error = child.kind === "group"
+            ? validateCriteria(child, fields)
+            : validateCondition(child, fields);
+        if (error)
+            return error;
+    }
+    return undefined;
+}
+export function moveCollectionEntry(items, index, direction) {
+    const target = index + direction;
+    if (index < 0 || index >= items.length || target < 0 || target >= items.length)
+        throw new Error("Invalid collection reorder");
+    const next = [...items];
+    [next[index], next[target]] = [next[target], next[index]];
+    return next;
+}

package/dist/utils/reorder.d.ts

@@ -0,0 +1,4 @@
+export declare function reorderKeys<T>(items: readonly T[], keyExtractor: (item: T) => string): string[];
+export declare function sameOrder(left: readonly string[], right: readonly string[]): boolean;
+export declare function moveReorderItem<T>(items: readonly T[], fromIndex: number, toIndex: number): T[];
+export declare function applyReorder<T>(items: readonly T[], keyExtractor: (item: T) => string, order: readonly string[]): T[];

package/dist/utils/reorder.js

@@ -0,0 +1,32 @@
+export function reorderKeys(items, keyExtractor) {
+    const keys = items.map(keyExtractor);
+    if (keys.some((key) => typeof key !== "string" || !key.trim()) ||
+        new Set(keys).size !== keys.length)
+        throw new Error("ReorderableList requires unique, non-empty string keys.");
+    return keys;
+}
+export function sameOrder(left, right) {
+    return left.length === right.length && left.every((key, index) => key === right[index]);
+}
+export function moveReorderItem(items, fromIndex, toIndex) {
+    if (!Number.isInteger(fromIndex) ||
+        !Number.isInteger(toIndex) ||
+        fromIndex < 0 ||
+        fromIndex >= items.length ||
+        toIndex < 0 ||
+        toIndex >= items.length)
+        throw new Error("ReorderableList received an invalid move.");
+    const next = [...items];
+    const [item] = next.splice(fromIndex, 1);
+    next.splice(toIndex, 0, item);
+    return next;
+}
+export function applyReorder(items, keyExtractor, order) {
+    const keys = reorderKeys(items, keyExtractor);
+    const indices = new Map(keys.map((key, index) => [key, index]));
+    if (order.length !== keys.length ||
+        new Set(order).size !== order.length ||
+        order.some((key) => !indices.has(key)))
+        throw new Error("ReorderableList received an order that does not match the current items.");
+    return order.map((key) => items[indices.get(key)]);
+}

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,5 @@
-import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
+import type { KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 interface AuthFormProps {
@@ -8,6 +9,8 @@ interface AuthFormProps {
     onBack?: () => void;
     FormNode: ReactNode;
     background?: AppBarBackground;
+    keyboardToolbar?: boolean;
+    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
 }
-declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, }: AuthFormProps): import("react").JSX.Element;
+declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, keyboardToolbar, keyboardFormProps, }: AuthFormProps): import("react").JSX.Element;
 export default AuthFormView;

package/dist/views/AuthFormView.js

@@ -1,11 +1,11 @@
 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;
-function AuthFormView({ title, description, logoSource, onBack, FormNode, background, }) {
+function AuthFormView({ title, description, logoSource, onBack, FormNode, background, keyboardToolbar, keyboardFormProps, }) {
     const renderTitle = () => {
         if (!title)
             return null;
@@ -16,6 +16,6 @@ function AuthFormView({ title, description, logoSource, onBack, FormNode, backgr
             return null;
         return _jsx(Text, { variant: "body", children: description });
     };
-    return (_jsx(AuthContainer, { background: background, header: _jsx(Logo, { size: "large", source: logoSource }), onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
+    return (_jsx(AuthContainer, { background: background, header: _jsx(Logo, { size: "large", source: logoSource }), keyboardFormProps: keyboardFormProps, keyboardToolbar: keyboardToolbar, onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
 }
 export default AuthFormView;