@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Display/pill.js

@@ -0,0 +1,47 @@
+import { c as _c } from "react/compiler-runtime";
+import { Typography } from "../Typography/index.js";
+import { StyleSheet } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const metrics = StyleSheet.create({
+  // 12 reads at a glance and keeps the pill 28 points tall (16 line height + padding).
+  label: {
+    fontSize: 12,
+    lineHeight: 16
+  }
+});
+/**
+ * The label every pill of the DS shares (badges, chips, tags): one size, one line,
+ * and the configured DS font instead of a className font that the app never loads.
+ */
+export function PillLabel(t0) {
+  const $ = _c(6);
+  const {
+    children,
+    className,
+    semibold: t1,
+    variant
+  } = t0;
+  const semibold = t1 === undefined ? false : t1;
+  const t2 = variant ? undefined : metrics.label;
+  const t3 = variant ?? "labelSmall";
+  let t4;
+  if ($[0] !== children || $[1] !== className || $[2] !== semibold || $[3] !== t2 || $[4] !== t3) {
+    t4 = _jsx(Typography.Text, {
+      className: className,
+      numberOfLines: 1,
+      semibold: semibold,
+      style: t2,
+      variant: t3,
+      children: children
+    });
+    $[0] = children;
+    $[1] = className;
+    $[2] = semibold;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}

package/dist/Feedback/ErrorBoundary.js

@@ -1,28 +1,40 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
 import FeedbackError from "./Feedback.Error.js";
-import { Component } from "react";
+import React, { Component } from "react";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 export class ErrorBoundary extends Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
-    static getDerivedStateFromError(error) {
-        return { hasError: true, error };
-    }
-    componentDidCatch(error, errorInfo) {
-        console.error("ErrorBoundary caught an error:", error, errorInfo);
-        this.props.onError?.(error, errorInfo);
-    }
-    handleRetry = () => {
-        this.setState({ hasError: false, error: null });
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
     };
-    render() {
-        if (this.state.hasError && this.state.error) {
-            if (this.props.fallback) {
-                return this.props.fallback(this.state.error, this.handleRetry);
-            }
-            return (_jsx(FeedbackError, { message: this.state.error.message || "Ocurrió un error inesperado", onRetry: this.handleRetry }));
-        }
-        return this.props.children;
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+    this.props.onError?.(error, errorInfo);
+  }
+  handleRetry = () => {
+    this.setState({
+      hasError: false,
+      error: null
+    });
+  };
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error, this.handleRetry);
+      }
+      return _jsx(FeedbackError, {
+        message: this.state.error.message || "Ocurrió un error inesperado",
+        onRetry: this.handleRetry
+      });
     }
+    return this.props.children;
+  }
 }

package/dist/Feedback/Feedback.Banner.js

@@ -1,36 +1,214 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const banner = tv({
-    slots: {
-        root: "flex-row items-start gap-3 rounded-lg p-3 border",
-        title: "text-sm font-semibold",
-        message: "text-sm text-text-secondary",
-    },
-    variants: {
-        tone: {
-            info: { root: "bg-container-info border-info/30", title: "text-info" },
-            success: { root: "bg-container-success border-success/30", title: "text-success" },
-            warning: { root: "bg-container-warning border-warning/30", title: "text-warning" },
-            danger: { root: "bg-container-danger border-danger/30", title: "text-danger" },
-        },
-    },
-    defaultVariants: { tone: "info" },
+  slots: {
+    root: "flex-row items-start gap-3 rounded-lg p-3 border",
+    title: "text-sm font-semibold",
+    message: "text-sm text-text-secondary"
+  },
+  variants: {
+    tone: {
+      info: {
+        root: "bg-container-info border-info/30",
+        title: "text-info"
+      },
+      success: {
+        root: "bg-container-success border-success/30",
+        title: "text-success"
+      },
+      warning: {
+        root: "bg-container-warning border-warning/30",
+        title: "text-warning"
+      },
+      danger: {
+        root: "bg-container-danger border-danger/30",
+        title: "text-danger"
+      }
+    }
+  },
+  defaultVariants: {
+    tone: "info"
+  }
 });
 const iconByTone = {
-    info: "info",
-    success: "success",
-    warning: "warning",
-    danger: "error",
+  info: "info",
+  success: "success",
+  warning: "warning",
+  danger: "error"
 };
-function Banner({ message, title, tone = "info", onClose, action, className, testID, }) {
-    const theme = useTheme();
-    const resolvedTone = tone ?? "info";
-    const styles = banner({ tone: resolvedTone });
-    return (_jsxs(View, { accessibilityLiveRegion: tone === "danger" ? "assertive" : "polite", accessibilityRole: tone === "danger" ? "alert" : undefined, className: styles.root({ className }), testID: testID, children: [_jsx(Icon, { color: theme[resolvedTone], name: iconByTone[resolvedTone], size: 20 }), _jsxs(View, { className: "flex-1 gap-0.5", children: [title ? _jsx(Typography.Text, { className: styles.title(), children: title }) : null, _jsx(Typography.Text, { className: styles.message(), children: message }), action ? _jsx(View, { className: "mt-2", children: action }) : null] }), onClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", hitSlop: 8, onPress: onClose, children: _jsx(Icon, { color: theme.icon.secondary, name: "close", size: 18 }) })) : null] }));
+function Banner(t0) {
+  const $ = _c(44);
+  const {
+    message,
+    title,
+    tone: t1,
+    onClose,
+    action,
+    className,
+    testID
+  } = t0;
+  const tone = t1 === undefined ? "info" : t1;
+  const theme = useTheme();
+  const resolvedTone = tone ?? "info";
+  let T0;
+  let T1;
+  let T2;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== className || $[1] !== resolvedTone || $[2] !== testID || $[3] !== theme || $[4] !== title || $[5] !== tone) {
+    const styles = banner({
+      tone: resolvedTone
+    });
+    T2 = View;
+    t5 = tone === "danger" ? "assertive" : "polite";
+    t6 = tone === "danger" ? "alert" : undefined;
+    t7 = styles.root({
+      className
+    });
+    t8 = testID;
+    const t10 = theme[resolvedTone];
+    const t11 = iconByTone[resolvedTone];
+    if ($[17] !== t10 || $[18] !== t11) {
+      t9 = _jsx(Icon, {
+        color: t10,
+        name: t11,
+        size: 20
+      });
+      $[17] = t10;
+      $[18] = t11;
+      $[19] = t9;
+    } else {
+      t9 = $[19];
+    }
+    T1 = View;
+    t3 = "flex-1 gap-0.5";
+    t4 = title ? _jsx(Typography.Text, {
+      className: styles.title(),
+      children: title
+    }) : null;
+    T0 = Typography.Text;
+    t2 = styles.message();
+    $[0] = className;
+    $[1] = resolvedTone;
+    $[2] = testID;
+    $[3] = theme;
+    $[4] = title;
+    $[5] = tone;
+    $[6] = T0;
+    $[7] = T1;
+    $[8] = T2;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    T0 = $[6];
+    T1 = $[7];
+    T2 = $[8];
+    t2 = $[9];
+    t3 = $[10];
+    t4 = $[11];
+    t5 = $[12];
+    t6 = $[13];
+    t7 = $[14];
+    t8 = $[15];
+    t9 = $[16];
+  }
+  let t10;
+  if ($[20] !== T0 || $[21] !== message || $[22] !== t2) {
+    t10 = _jsx(T0, {
+      className: t2,
+      children: message
+    });
+    $[20] = T0;
+    $[21] = message;
+    $[22] = t2;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] !== action) {
+    t11 = action ? _jsx(View, {
+      className: "mt-2",
+      children: action
+    }) : null;
+    $[24] = action;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  let t12;
+  if ($[26] !== T1 || $[27] !== t10 || $[28] !== t11 || $[29] !== t3 || $[30] !== t4) {
+    t12 = _jsxs(T1, {
+      className: t3,
+      children: [t4, t10, t11]
+    });
+    $[26] = T1;
+    $[27] = t10;
+    $[28] = t11;
+    $[29] = t3;
+    $[30] = t4;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  let t13;
+  if ($[32] !== onClose || $[33] !== theme.icon) {
+    t13 = onClose ? _jsx(Pressable, {
+      accessibilityLabel: "Cerrar",
+      accessibilityRole: "button",
+      hitSlop: 8,
+      onPress: onClose,
+      children: _jsx(Icon, {
+        color: theme.icon.secondary,
+        name: "close",
+        size: 18
+      })
+    }) : null;
+    $[32] = onClose;
+    $[33] = theme.icon;
+    $[34] = t13;
+  } else {
+    t13 = $[34];
+  }
+  let t14;
+  if ($[35] !== T2 || $[36] !== t12 || $[37] !== t13 || $[38] !== t5 || $[39] !== t6 || $[40] !== t7 || $[41] !== t8 || $[42] !== t9) {
+    t14 = _jsxs(T2, {
+      accessibilityLiveRegion: t5,
+      accessibilityRole: t6,
+      className: t7,
+      testID: t8,
+      children: [t9, t12, t13]
+    });
+    $[35] = T2;
+    $[36] = t12;
+    $[37] = t13;
+    $[38] = t5;
+    $[39] = t6;
+    $[40] = t7;
+    $[41] = t8;
+    $[42] = t9;
+    $[43] = t14;
+  } else {
+    t14 = $[43];
+  }
+  return t14;
 }
 export default Banner;

package/dist/Feedback/Feedback.DomainSplashScreen.js

@@ -1,84 +1,260 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import Pattern from "../Display/Display.Pattern.js";
 import Progress from "./Feedback.Progress.js";
 import { useTheme } from "../theme/index.js";
+import { ON_DARK_SURFACE } from "../theme/on-dark-surface.js";
 import { Typography } from "../Typography/index.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { useEffect, useRef, useState } from "react";
 import { Animated, StyleSheet, View } from "react-native";
-function DomainSplashScreen({ domainName, isLoading, children, onComplete, minDuration = 300, containerStyle, overlayStyle, renderLoading, testID, }) {
-    if (!Number.isFinite(minDuration) || minDuration < 0)
-        throw new RangeError("DomainSplashScreen minDuration must be a finite, non-negative number.");
-    const theme = useTheme();
-    const reducedMotion = useReducedMotion();
-    const [opacity] = useState(() => new Animated.Value(isLoading ? 1 : 0));
-    const [visible, setVisible] = useState(isLoading);
-    const startedAt = useRef(null);
-    const completed = useRef(false);
-    const onCompleteRef = useRef(onComplete);
-    const busy = isLoading || visible;
-    if (isLoading && !visible)
-        setVisible(true);
-    useEffect(() => {
-        onCompleteRef.current = onComplete;
-    }, [onComplete]);
-    useEffect(() => {
-        if (isLoading) {
-            startedAt.current = Date.now();
-            completed.current = false;
-        }
-    }, [isLoading]);
-    useEffect(() => {
-        if (isLoading) {
-            opacity.stopAnimation();
-            opacity.setValue(1);
-            return;
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function DomainSplashScreen(t0) {
+  const $ = _c(37);
+  const {
+    domainName,
+    isLoading,
+    children,
+    onComplete,
+    minDuration: t1,
+    containerStyle,
+    overlayStyle,
+    renderLoading,
+    testID
+  } = t0;
+  const minDuration = t1 === undefined ? 300 : t1;
+  if (!Number.isFinite(minDuration) || minDuration < 0) {
+    throw new RangeError("DomainSplashScreen minDuration must be a finite, non-negative number.");
+  }
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  let t2;
+  if ($[0] !== isLoading) {
+    t2 = () => new Animated.Value(isLoading ? 1 : 0);
+    $[0] = isLoading;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const [opacity] = useState(t2);
+  const [visible, setVisible] = useState(isLoading);
+  const startedAt = useRef(null);
+  const completed = useRef(false);
+  const onCompleteRef = useRef(onComplete);
+  const busy = isLoading || visible;
+  if (isLoading && !visible) {
+    setVisible(true);
+  }
+  let t3;
+  let t4;
+  if ($[2] !== onComplete) {
+    t3 = () => {
+      onCompleteRef.current = onComplete;
+    };
+    t4 = [onComplete];
+    $[2] = onComplete;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t3 = $[3];
+    t4 = $[4];
+  }
+  useEffect(t3, t4);
+  let t5;
+  let t6;
+  if ($[5] !== isLoading) {
+    t5 = () => {
+      if (isLoading) {
+        startedAt.current = Date.now();
+        completed.current = false;
+      }
+    };
+    t6 = [isLoading];
+    $[5] = isLoading;
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t5 = $[6];
+    t6 = $[7];
+  }
+  useEffect(t5, t6);
+  let t7;
+  let t8;
+  if ($[8] !== isLoading || $[9] !== minDuration || $[10] !== opacity || $[11] !== reducedMotion) {
+    t7 = () => {
+      if (isLoading) {
+        opacity.stopAnimation();
+        opacity.setValue(1);
+        return;
+      }
+      if (startedAt.current === null || completed.current) {
+        return;
+      }
+      let active = true;
+      let animation;
+      const finish = () => {
+        if (!active || completed.current) {
+          return;
         }
-        if (startedAt.current === null || completed.current)
-            return;
-        let active = true;
-        let animation;
-        const finish = () => {
-            if (!active || completed.current)
-                return;
-            completed.current = true;
-            setVisible(false);
-            onCompleteRef.current?.();
-        };
-        const timeout = setTimeout(() => {
-            if (reducedMotion) {
-                opacity.setValue(0);
-                finish();
+        completed.current = true;
+        setVisible(false);
+        onCompleteRef.current?.();
+      };
+      const timeout = setTimeout(() => {
+        if (reducedMotion) {
+          opacity.setValue(0);
+          finish();
+        } else {
+          animation = Animated.timing(opacity, {
+            toValue: 0,
+            duration: 400,
+            useNativeDriver: true,
+            isInteraction: false
+          });
+          animation.start(t9 => {
+            const {
+              finished
+            } = t9;
+            if (finished) {
+              finish();
             }
-            else {
-                animation = Animated.timing(opacity, {
-                    toValue: 0,
-                    duration: 400,
-                    useNativeDriver: true,
-                    isInteraction: false,
-                });
-                animation.start(({ finished }) => {
-                    if (finished)
-                        finish();
-                });
-            }
-        }, Math.max(0, minDuration - (Date.now() - startedAt.current)));
-        return () => {
-            active = false;
-            clearTimeout(timeout);
-            animation?.stop();
-        };
-    }, [isLoading, minDuration, opacity, reducedMotion]);
-    return (_jsxs(View, { style: [styles.container, containerStyle], testID: testID, children: [_jsx(View, { accessibilityElementsHidden: busy, importantForAccessibility: busy ? "no-hide-descendants" : "auto", pointerEvents: busy ? "none" : "auto", style: styles.container, testID: testID ? `${testID}-content` : undefined, children: children }), busy ? (_jsx(Animated.View, { style: [
-                    StyleSheet.absoluteFill,
-                    { opacity: isLoading ? 1 : opacity },
-                    overlayStyle,
-                ], testID: testID ? `${testID}-loading` : undefined, children: renderLoading ? (renderLoading({ domainName, isLoading, reducedMotion })) : (_jsxs(GradientSurface, { className: "flex-1", preset: "warm", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [_jsx(Pattern, { color: theme.primary, kind: "dots", opacity: 0.14, size: 26 }), _jsx(View, { className: "flex-1 justify-center items-center px-8", children: _jsxs(View, { className: "w-full items-center gap-5", children: [_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 24, letterSpacing: 0.5 }, children: `Cargando ${domainName}` }), _jsx(Progress, { accessibilityLabel: `Cargando ${domainName}`, indeterminate: true, indicatorStyle: { backgroundColor: theme.primary }, style: { backgroundColor: "rgba(255,255,255,0.18)" } })] }) })] })) })) : null] }));
+          });
+        }
+      }, Math.max(0, minDuration - (Date.now() - startedAt.current)));
+      return () => {
+        active = false;
+        clearTimeout(timeout);
+        animation?.stop();
+      };
+    };
+    t8 = [isLoading, minDuration, opacity, reducedMotion];
+    $[8] = isLoading;
+    $[9] = minDuration;
+    $[10] = opacity;
+    $[11] = reducedMotion;
+    $[12] = t7;
+    $[13] = t8;
+  } else {
+    t7 = $[12];
+    t8 = $[13];
+  }
+  useEffect(t7, t8);
+  let t9;
+  if ($[14] !== containerStyle) {
+    t9 = [styles.container, containerStyle];
+    $[14] = containerStyle;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  const t10 = busy ? "no-hide-descendants" : "auto";
+  const t11 = busy ? "none" : "auto";
+  const t12 = testID ? `${testID}-content` : undefined;
+  let t13;
+  if ($[16] !== busy || $[17] !== children || $[18] !== t10 || $[19] !== t11 || $[20] !== t12) {
+    t13 = _jsx(View, {
+      accessibilityElementsHidden: busy,
+      importantForAccessibility: t10,
+      pointerEvents: t11,
+      style: styles.container,
+      testID: t12,
+      children: children
+    });
+    $[16] = busy;
+    $[17] = children;
+    $[18] = t10;
+    $[19] = t11;
+    $[20] = t12;
+    $[21] = t13;
+  } else {
+    t13 = $[21];
+  }
+  let t14;
+  if ($[22] !== busy || $[23] !== domainName || $[24] !== isLoading || $[25] !== opacity || $[26] !== overlayStyle || $[27] !== reducedMotion || $[28] !== renderLoading || $[29] !== testID || $[30] !== theme) {
+    t14 = busy ? _jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, {
+        opacity: isLoading ? 1 : opacity
+      }, overlayStyle],
+      testID: testID ? `${testID}-loading` : undefined,
+      children: renderLoading ? renderLoading({
+        domainName,
+        isLoading,
+        reducedMotion
+      }) : _jsxs(GradientSurface, {
+        className: "flex-1",
+        preset: "warm",
+        radius: "none",
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        children: [_jsx(Pattern, {
+          color: theme.primary,
+          kind: "dots",
+          opacity: 0.14,
+          size: 26
+        }), _jsx(View, {
+          className: "flex-1 justify-center items-center px-8",
+          children: _jsxs(View, {
+            className: "w-full items-center gap-5",
+            children: [_jsx(Typography.Text, {
+              bold: true,
+              style: {
+                color: ON_DARK_SURFACE.ink,
+                letterSpacing: 0.5
+              },
+              variant: "h3",
+              children: `Cargando ${domainName}`
+            }), _jsx(Progress, {
+              accessibilityLabel: `Cargando ${domainName}`,
+              indeterminate: true,
+              indicatorStyle: {
+                backgroundColor: theme.primary
+              },
+              style: {
+                backgroundColor: ON_DARK_SURFACE.glass
+              }
+            })]
+          })
+        })]
+      })
+    }) : null;
+    $[22] = busy;
+    $[23] = domainName;
+    $[24] = isLoading;
+    $[25] = opacity;
+    $[26] = overlayStyle;
+    $[27] = reducedMotion;
+    $[28] = renderLoading;
+    $[29] = testID;
+    $[30] = theme;
+    $[31] = t14;
+  } else {
+    t14 = $[31];
+  }
+  let t15;
+  if ($[32] !== t13 || $[33] !== t14 || $[34] !== t9 || $[35] !== testID) {
+    t15 = _jsxs(View, {
+      style: t9,
+      testID: testID,
+      children: [t13, t14]
+    });
+    $[32] = t13;
+    $[33] = t14;
+    $[34] = t9;
+    $[35] = testID;
+    $[36] = t15;
+  } else {
+    t15 = $[36];
+  }
+  return t15;
 }
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
+  container: {
+    flex: 1
+  }
 });
 export default DomainSplashScreen;