@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/index.js

@@ -6,24 +6,30 @@ export { Feedback } from "./Feedback/index.js";
 export { Form } from "./Form/index.js";
 export { Navigation } from "./Navigation/index.js";
 export { Typography } from "./Typography/index.js";
+
 // Primitives (NativeWind-based - Layout utilities)
 export { Box, Row, Stack } from "./primitives/index.js";
+
 // Branding (logo + brand mesh symbol, configurado una vez; Display.Logo y
 // Display.Pattern leen de acá como fallback)
-export { getBrandingLogo, getBrandingMesh, getBrandingMeshSize, setBranding, } from "./branding.js";
+export { getBrandingLogo, getBrandingMesh, getBrandingMeshSize, setBranding } from "./branding.js";
+
 // Theme
 export { cn, tv } from "./theme/tw.js";
-export { appliedTextStyle, fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants, } from "./theme/typography.js";
+export { appliedTextStyle, fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants } from "./theme/typography.js";
+
 // Layouts
 export { BottomInsetContext } from "./layouts/BottomInset.js";
 export { default as Container } from "./layouts/Container.js";
 export { default as GradientContainer } from "./layouts/GradientContainer.js";
 export { default as PlainLayout } from "./layouts/PlainLayout.js";
 export { default as ScrollContainer } from "./layouts/ScrollContainer.js";
+
 // Views
 export { default as AppSplashView } from "./views/AppSplashView.js";
 export { default as AuthFormView } from "./views/AuthFormView.js";
 export { default as FormViewV2 } from "./views/FormViewV2.js";
 export { default as ListViewV2 } from "./views/ListViewV2.js";
+
 // Widgets
 export { default as JSONViewer } from "./widgets/JSONViewer.js";

package/dist/layouts/AuthContainer.d.ts

@@ -1,20 +1,19 @@
 import { type KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
+import type { SafeAreaEdge } from "./edges.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { ReactNode } from "react";
-import { type Edge } from "react-native-safe-area-context";
 interface AuthContainerProps {
     header: ReactNode;
     children: ReactNode;
     onBackPress?: () => void;
     className?: string;
-    edges?: Edge[];
-    keyboardToolbar?: boolean;
-    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
+    edges?: SafeAreaEdge[];
+    keyboardFormProps?: Omit<KeyboardFormProps, "children">;
     /** Gradient + optional texture surface for the header area. Defaults to the `brand`
      *  preset. Set `background.pattern` to opt-in a texture (`dots` / `grid` /
      *  `diagonals`); compose `<Display.Pattern kind="mesh" />` outside if you want the
      *  brand symbol. */
     background?: AppBarBackground;
 }
-declare function AuthContainer({ header, children, onBackPress, background, className, edges, keyboardToolbar, keyboardFormProps, }: AuthContainerProps): import("react").JSX.Element;
+declare function AuthContainer({ header, children, onBackPress, background, className, edges, keyboardFormProps, }: AuthContainerProps): import("react").JSX.Element;
 export default AuthContainer;

package/dist/layouts/AuthContainer.js

@@ -1,14 +1,238 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display/index.js";
+import { c as _c } from "react/compiler-runtime";
+import IconButton from "../Actions/Actions.IconButton.js";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import { Pattern } from "../Display/Display.Pattern.js";
 import KeyboardForm from "../Form/Form.KeyboardForm.js";
 import { useTheme } from "../theme/index.js";
+import { ON_DARK_SURFACE } from "../theme/on-dark-surface.js";
 import { cn } from "../theme/tw.js";
-import { Keyboard, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-function AuthContainer({ header, children, onBackPress, background, className, edges = ["top", "bottom", "left", "right"], keyboardToolbar = true, keyboardFormProps, }) {
-    const theme = useTheme();
-    return (_jsxs(GradientSurface, { className: cn("flex-1", className), colors: background?.colors, end: background?.end ?? (background?.colors ? { x: 0, y: 1 } : undefined), preset: background?.surface ?? "brand", radius: "none", start: background?.start ?? (background?.colors ? { x: 0, y: 0 } : undefined), style: { flex: 1 }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _jsx(SafeAreaView, { className: "flex-1", edges: edges, children: _jsxs(View, { className: "flex-1", children: [_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, children: _jsxs(View, { className: "justify-center items-center relative", style: { height: "30%" }, children: [onBackPress && (_jsx(TouchableOpacity, { className: "absolute top-4 left-4 p-2 z-[1]", onPress: onBackPress, children: _jsx(Display.Icon, { color: background?.textColor ?? theme.text.inverse, name: "back", size: 24 }) })), header] }) }), _jsx(View, { className: "flex-1 bg-bg-card rounded-t-3xl shadow-lg", children: _jsx(KeyboardForm, { bottomOffset: keyboardToolbar ? undefined : 50, bounces: false, className: "flex-1", contentContainerClassName: "flex-grow pb-10", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, ...keyboardFormProps, toolbar: keyboardToolbar, children: _jsx(View, { className: "p-4", children: children }) }) })] }) })] }));
+import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function AuthContainer(t0) {
+  const $ = _c(45);
+  const {
+    header,
+    children,
+    onBackPress,
+    background,
+    className,
+    edges: t1,
+    keyboardFormProps
+  } = t0;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = t1 === undefined ? ["top", "bottom", "left", "right"] : t1;
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const edges = t2;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const reservesBottom = edges.includes("bottom");
+  let t3;
+  if ($[2] !== edges) {
+    t3 = edges.filter(_temp);
+    $[2] = edges;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const outerEdges = t3;
+  let t4;
+  if ($[4] !== className) {
+    t4 = cn("flex-1", className);
+    $[4] = className;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = background?.colors;
+  let t6;
+  if ($[6] !== background?.colors || $[7] !== background?.end) {
+    t6 = background?.end ?? (background?.colors ? {
+      x: 0,
+      y: 1
+    } : undefined);
+    $[6] = background?.colors;
+    $[7] = background?.end;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  const t7 = background?.surface ?? "brand";
+  let t8;
+  if ($[9] !== background?.colors || $[10] !== background?.start) {
+    t8 = background?.start ?? (background?.colors ? {
+      x: 0,
+      y: 0
+    } : undefined);
+    $[9] = background?.colors;
+    $[10] = background?.start;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  let t9;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
+      flex: 1
+    };
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== background) {
+    t10 = background?.pattern ? _jsx(Pattern, {
+      color: background.patternColor ?? ON_DARK_SURFACE.ink,
+      kind: background.pattern,
+      opacity: background.patternOpacity ?? 0.18
+    }) : null;
+    $[13] = background;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  let t11;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = {
+      minHeight: "28%"
+    };
+    $[15] = t11;
+  } else {
+    t11 = $[15];
+  }
+  let t12;
+  if ($[16] !== background?.textColor || $[17] !== onBackPress || $[18] !== theme) {
+    t12 = onBackPress && _jsx(IconButton, {
+      accessibilityLabel: "Volver",
+      className: "absolute top-2 left-2 z-[1]",
+      icon: "back",
+      iconColor: background?.textColor ?? theme.text.inverse,
+      onPress: onBackPress,
+      size: "large"
+    });
+    $[16] = background?.textColor;
+    $[17] = onBackPress;
+    $[18] = theme;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== header || $[21] !== t12) {
+    t13 = _jsx(TouchableWithoutFeedback, {
+      accessible: false,
+      onPress: Keyboard.dismiss,
+      children: _jsxs(View, {
+        className: "items-center justify-end px-6 pt-12 pb-14 relative",
+        style: t11,
+        children: [t12, header]
+      })
+    });
+    $[20] = header;
+    $[21] = t12;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  const t14 = (reservesBottom ? insets.bottom : 0) + 24;
+  let t15;
+  if ($[23] !== t14) {
+    t15 = {
+      flexGrow: 1,
+      paddingBottom: t14
+    };
+    $[23] = t14;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  let t16;
+  if ($[25] !== children) {
+    t16 = _jsx(View, {
+      className: "px-6 pt-8",
+      children: children
+    });
+    $[25] = children;
+    $[26] = t16;
+  } else {
+    t16 = $[26];
+  }
+  let t17;
+  if ($[27] !== keyboardFormProps || $[28] !== t15 || $[29] !== t16) {
+    t17 = _jsx(View, {
+      className: "flex-1 -mt-8 bg-bg-card rounded-t-[32px] shadow-lg",
+      children: _jsx(KeyboardForm, {
+        bounces: false,
+        contentContainerStyle: t15,
+        keyboardShouldPersistTaps: "handled",
+        showsVerticalScrollIndicator: false,
+        ...keyboardFormProps,
+        children: t16
+      })
+    });
+    $[27] = keyboardFormProps;
+    $[28] = t15;
+    $[29] = t16;
+    $[30] = t17;
+  } else {
+    t17 = $[30];
+  }
+  let t18;
+  if ($[31] !== t13 || $[32] !== t17) {
+    t18 = _jsxs(View, {
+      className: "flex-1",
+      children: [t13, t17]
+    });
+    $[31] = t13;
+    $[32] = t17;
+    $[33] = t18;
+  } else {
+    t18 = $[33];
+  }
+  let t19;
+  if ($[34] !== outerEdges || $[35] !== t18) {
+    t19 = _jsx(SafeAreaView, {
+      className: "flex-1",
+      edges: outerEdges,
+      children: t18
+    });
+    $[34] = outerEdges;
+    $[35] = t18;
+    $[36] = t19;
+  } else {
+    t19 = $[36];
+  }
+  let t20;
+  if ($[37] !== t10 || $[38] !== t19 || $[39] !== t4 || $[40] !== t5 || $[41] !== t6 || $[42] !== t7 || $[43] !== t8) {
+    t20 = _jsxs(GradientSurface, {
+      className: t4,
+      colors: t5,
+      end: t6,
+      preset: t7,
+      radius: "none",
+      start: t8,
+      style: t9,
+      children: [t10, t19]
+    });
+    $[37] = t10;
+    $[38] = t19;
+    $[39] = t4;
+    $[40] = t5;
+    $[41] = t6;
+    $[42] = t7;
+    $[43] = t8;
+    $[44] = t20;
+  } else {
+    t20 = $[44];
+  }
+  return t20;
+}
+function _temp(edge) {
+  return edge !== "bottom";
 }
 export default AuthContainer;

package/dist/layouts/BottomInset.js

@@ -1,4 +1,5 @@
 import { createContext, useContext } from "react";
+
 /**
  * Extra bottom inset for scroll views, provided by the host app when a floating
  * element (e.g. position:absolute tab bar) sits above the native safe area.
@@ -14,4 +15,6 @@ import { createContext, useContext } from "react";
  * The native safe-area inset is already handled by Container (SafeAreaView edges=["bottom"]).
  */
 export const BottomInsetContext = createContext(0);
-export const useBottomInset = () => useContext(BottomInsetContext);
+export const useBottomInset = () => {
+  return useContext(BottomInsetContext);
+};

package/dist/layouts/Container.d.ts

@@ -1,10 +1,10 @@
+import type { SafeAreaEdge } from "./edges.js";
 import { FC, ReactNode } from "react";
 import { ViewStyle } from "react-native";
-import { Edge } from "react-native-safe-area-context";
 type ContainerProps = {
     children: ReactNode;
     style?: ViewStyle;
-    edges?: Edge[];
+    edges?: SafeAreaEdge[];
     className?: string;
 };
 declare const Container: FC<ContainerProps>;

package/dist/layouts/Container.js

@@ -1,7 +1,49 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
+import React from "react";
 import { SafeAreaView } from "react-native-safe-area-context";
-const Container = ({ children, style, edges = ["left", "right"], className, }) => {
-    return (_jsx(SafeAreaView, { className: cn("flex-1 bg-bg-page", className), edges: edges, style: style, children: children }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const Container = t0 => {
+  const $ = _c(9);
+  const {
+    children,
+    style,
+    edges: t1,
+    className
+  } = t0;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = t1 === undefined ? ["left", "right"] : t1;
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const edges = t2;
+  let t3;
+  if ($[2] !== className) {
+    t3 = cn("flex-1 bg-bg-page", className);
+    $[2] = className;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== children || $[5] !== edges || $[6] !== style || $[7] !== t3) {
+    t4 = _jsx(SafeAreaView, {
+      className: t3,
+      edges: edges,
+      style: style,
+      children: children
+    });
+    $[4] = children;
+    $[5] = edges;
+    $[6] = style;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
 };
 export default Container;

package/dist/layouts/GradientContainer.js

@@ -1,8 +1,40 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { c as _c } from "react/compiler-runtime";
+import { useTheme } from "../theme/index.js";
 import { LinearGradient } from "expo-linear-gradient";
-const GradientContainer = ({ children, style, className }) => {
-    const gradientColors = theme.gradient.primary;
-    return (_jsx(LinearGradient, { className: className, colors: [...gradientColors], style: style, children: children }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const GradientContainer = t0 => {
+  const $ = _c(7);
+  const {
+    children,
+    style,
+    className
+  } = t0;
+  const theme = useTheme();
+  const gradientColors = theme.gradient.primary;
+  let t1;
+  if ($[0] !== gradientColors) {
+    t1 = [...gradientColors];
+    $[0] = gradientColors;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== children || $[3] !== className || $[4] !== style || $[5] !== t1) {
+    t2 = _jsx(LinearGradient, {
+      className: className,
+      colors: t1,
+      style: style,
+      children: children
+    });
+    $[2] = children;
+    $[3] = className;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 };
 export default GradientContainer;

package/dist/layouts/PlainLayout.js

@@ -1,8 +1,24 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { memo } from "react";
 import { View } from "react-native";
-const PlainLayout = memo(({ children }) => {
-    return _jsx(View, { className: "flex-1", children: children });
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const PlainLayout = memo(t0 => {
+  const $ = _c(2);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children) {
+    t1 = _jsx(View, {
+      className: "flex-1",
+      children: children
+    });
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 });
 PlainLayout.displayName = "PlainLayout";
 export default PlainLayout;

package/dist/layouts/ScrollContainer.d.ts

@@ -1,12 +1,17 @@
-import React, { ReactNode } from "react";
-import { type StyleProp, type ViewStyle } from "react-native";
-import { type KeyboardAwareScrollViewProps } from "react-native-keyboard-controller";
-import { type Edge } from "react-native-safe-area-context";
-type ScrollContainerProps = Omit<KeyboardAwareScrollViewProps, "children"> & {
+import { type KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
+import type { SafeAreaEdge } from "./edges.js";
+import type { ReactNode } from "react";
+export interface ScrollContainerProps extends Omit<KeyboardFormProps, "children" | "className"> {
     children: ReactNode;
-    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Classes of the safe-area surface. */
     className?: string;
-    edges?: Edge[];
-};
-declare function ScrollContainer({ children, contentContainerStyle, className, edges, bottomOffset, style, ...props }: ScrollContainerProps): React.JSX.Element;
+    /** Edges this container reserves. Lateral by default: the header owns top. */
+    edges?: SafeAreaEdge[];
+}
+/**
+ * Scrollable page surface. The scroll is the DS `KeyboardForm`, so the space kept
+ * above the keyboard and the toolbar group are the same as in every form, and iOS
+ * keeps adjusting the content inset natively (large titles, NativeTabs).
+ */
+declare function ScrollContainer({ children, className, edges, contentContainerStyle, contentInsetAdjustmentBehavior, showsVerticalScrollIndicator, ...form }: ScrollContainerProps): import("react").JSX.Element;
 export default ScrollContainer;

package/dist/layouts/ScrollContainer.js

@@ -1,9 +1,130 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import KeyboardForm from "../Form/Form.KeyboardForm.js";
 import { cn } from "../theme/tw.js";
 import { View } from "react-native";
-import { KeyboardAwareScrollView, } from "react-native-keyboard-controller";
 import { SafeAreaView } from "react-native-safe-area-context";
-function ScrollContainer({ children, contentContainerStyle = {}, className, edges = ["left", "right"], bottomOffset = 72, style, ...props }) {
-    return (_jsx(SafeAreaView, { className: cn("flex-1 bg-bg-card", className), edges: edges, children: _jsx(KeyboardAwareScrollView, { bottomOffset: bottomOffset, contentContainerStyle: [{ flexGrow: 1, padding: 16 }, contentContainerStyle], contentInsetAdjustmentBehavior: "automatic", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, style: [{ flex: 1 }, style], ...props, children: _jsx(View, { className: "flex-1", children: children }) }) }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+/**
+ * Scrollable page surface. The scroll is the DS `KeyboardForm`, so the space kept
+ * above the keyboard and the toolbar group are the same as in every form, and iOS
+ * keeps adjusting the content inset natively (large titles, NativeTabs).
+ */
+function ScrollContainer(t0) {
+  const $ = _c(27);
+  let children;
+  let className;
+  let contentContainerStyle;
+  let form;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      edges: t1,
+      contentContainerStyle,
+      contentInsetAdjustmentBehavior: t2,
+      showsVerticalScrollIndicator: t3,
+      ...form
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = contentContainerStyle;
+    $[4] = form;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    children = $[1];
+    className = $[2];
+    contentContainerStyle = $[3];
+    form = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== t1) {
+    t4 = t1 === undefined ? ["left", "right"] : t1;
+    $[8] = t1;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const edges = t4;
+  const contentInsetAdjustmentBehavior = t2 === undefined ? "automatic" : t2;
+  const showsVerticalScrollIndicator = t3 === undefined ? false : t3;
+  let t5;
+  if ($[10] !== className) {
+    t5 = cn("flex-1 bg-bg-card", className);
+    $[10] = className;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      flexGrow: 1,
+      padding: 16
+    };
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== contentContainerStyle) {
+    t7 = [t6, contentContainerStyle];
+    $[13] = contentContainerStyle;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== children) {
+    t8 = _jsx(View, {
+      className: "flex-1",
+      children: children
+    });
+    $[15] = children;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  let t9;
+  if ($[17] !== contentInsetAdjustmentBehavior || $[18] !== form || $[19] !== showsVerticalScrollIndicator || $[20] !== t7 || $[21] !== t8) {
+    t9 = _jsx(KeyboardForm, {
+      contentContainerStyle: t7,
+      contentInsetAdjustmentBehavior: contentInsetAdjustmentBehavior,
+      showsVerticalScrollIndicator: showsVerticalScrollIndicator,
+      ...form,
+      children: t8
+    });
+    $[17] = contentInsetAdjustmentBehavior;
+    $[18] = form;
+    $[19] = showsVerticalScrollIndicator;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  let t10;
+  if ($[23] !== edges || $[24] !== t5 || $[25] !== t9) {
+    t10 = _jsx(SafeAreaView, {
+      className: t5,
+      edges: edges,
+      children: t9
+    });
+    $[23] = edges;
+    $[24] = t5;
+    $[25] = t9;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  return t10;
 }
 export default ScrollContainer;

package/dist/layouts/edges.d.ts

@@ -0,0 +1,2 @@
+/** A screen edge a container reserves for the safe area. */
+export type SafeAreaEdge = "top" | "right" | "bottom" | "left";

package/dist/layouts/edges.js

@@ -0,0 +1 @@
+export {};