@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Feedback/Feedback.Splash.js

@@ -1,50 +1,257 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import ExpoImage from "../Display/Display.ExpoImage.js";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import Pattern from "../Display/Display.Pattern.js";
 import Loading from "./Feedback.Loading.js";
 import Spinner from "./Feedback.Spinner.js";
 import GradientContainer from "../layouts/GradientContainer.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
+import { ON_DARK_SURFACE } from "../theme/on-dark-surface.js";
 import { Typography } from "../Typography/index.js";
 import { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 function renderLogo(logo) {
-    if (!logo) {
-        return null;
-    }
-    return (_jsx(ExpoImage, { className: "w-[250px] h-[200px] mb-12", contentFit: "contain", source: logo }));
+  if (!logo) {
+    return null;
+  }
+  return _jsx(ExpoImage, {
+    className: "w-[250px] h-[200px] mb-12",
+    contentFit: "contain",
+    source: logo
+  });
 }
-function HeroSplash({ logo, message, title, subtitle, }) {
-    return (_jsxs(GradientSurface, { className: "flex-1 items-center justify-center", preset: "warm", radius: "none", children: [_jsx(Pattern, { color: theme.primary, kind: "dots", opacity: 0.16, size: 26 }), _jsxs(View, { className: "items-center", children: [logo ? (_jsx(ExpoImage, { className: "w-28 h-28 mb-7", contentFit: "contain", source: logo, style: { shadowColor: theme.primary, shadowOpacity: 0.7, shadowRadius: 28 } })) : null, title ? (_jsx(Typography.Text, { bold: true, style: { color: "#FFFFFF", fontSize: 28, letterSpacing: 1 }, children: title })) : null, subtitle ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.6)", fontSize: 13, marginTop: 6 }, children: subtitle })) : null, _jsx(View, { className: "mt-10", children: _jsx(Spinner, { accessibilityLabel: message, color: theme.primary, size: "small" }) })] })] }));
+function HeroSplash(t0) {
+  const $ = _c(21);
+  const {
+    logo,
+    message,
+    title,
+    subtitle
+  } = t0;
+  const theme = useTheme();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      flex: 1
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== theme.primary) {
+    t2 = _jsx(Pattern, {
+      color: theme.primary,
+      kind: "dots",
+      opacity: 0.16,
+      size: 26
+    });
+    $[1] = theme.primary;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== logo || $[4] !== theme.primary) {
+    t3 = logo ? _jsx(ExpoImage, {
+      className: "w-28 h-28 mb-7",
+      contentFit: "contain",
+      source: logo,
+      style: {
+        shadowColor: theme.primary,
+        shadowOpacity: 0.7,
+        shadowRadius: 28
+      }
+    }) : null;
+    $[3] = logo;
+    $[4] = theme.primary;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== title) {
+    t4 = title ? _jsx(Typography.Text, {
+      bold: true,
+      style: {
+        color: ON_DARK_SURFACE.ink,
+        letterSpacing: 1
+      },
+      variant: "h2",
+      children: title
+    }) : null;
+    $[6] = title;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== subtitle) {
+    t5 = subtitle ? _jsx(Typography.Text, {
+      style: {
+        color: ON_DARK_SURFACE.muted,
+        fontSize: 13,
+        marginTop: 6
+      },
+      children: subtitle
+    }) : null;
+    $[8] = subtitle;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== message || $[11] !== theme.primary) {
+    t6 = _jsx(View, {
+      className: "mt-10",
+      children: _jsx(Spinner, {
+        accessibilityLabel: message,
+        color: theme.primary,
+        size: "small"
+      })
+    });
+    $[10] = message;
+    $[11] = theme.primary;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
+    t7 = _jsxs(View, {
+      className: "items-center",
+      children: [t3, t4, t5, t6]
+    });
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== t2 || $[19] !== t7) {
+    t8 = _jsxs(GradientSurface, {
+      className: "flex-1 items-center justify-center",
+      preset: "warm",
+      radius: "none",
+      style: t1,
+      testID: "hero-splash",
+      children: [t2, t7]
+    });
+    $[18] = t2;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  return t8;
 }
-function Splash({ isReady, logo, minDuration = 800, message = "Inicializando...", variant = "default", title, subtitle, children, }) {
-    const [showContent, setShowContent] = useState(false);
-    const minDurationTimeoutRef = useRef(null);
-    useEffect(() => {
+function Splash(t0) {
+  const $ = _c(16);
+  const {
+    isReady,
+    logo,
+    minDuration: t1,
+    message: t2,
+    variant: t3,
+    title,
+    subtitle,
+    children
+  } = t0;
+  const minDuration = t1 === undefined ? 800 : t1;
+  const message = t2 === undefined ? "Inicializando..." : t2;
+  const variant = t3 === undefined ? "default" : t3;
+  const [showContent, setShowContent] = useState(false);
+  const minDurationTimeoutRef = useRef(null);
+  let t4;
+  let t5;
+  if ($[0] !== isReady || $[1] !== minDuration) {
+    t4 = () => {
+      if (minDurationTimeoutRef.current) {
+        clearTimeout(minDurationTimeoutRef.current);
+      }
+      if (!isReady) {
+        setShowContent(false);
+        return;
+      }
+      minDurationTimeoutRef.current = setTimeout(() => {
+        setShowContent(true);
+      }, minDuration);
+      return () => {
         if (minDurationTimeoutRef.current) {
-            clearTimeout(minDurationTimeoutRef.current);
-        }
-        if (!isReady) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setShowContent(false);
-            return;
+          clearTimeout(minDurationTimeoutRef.current);
         }
-        minDurationTimeoutRef.current = setTimeout(() => {
-            setShowContent(true);
-        }, minDuration);
-        return () => {
-            if (minDurationTimeoutRef.current) {
-                clearTimeout(minDurationTimeoutRef.current);
-            }
-        };
-    }, [isReady, minDuration]);
-    if (!showContent) {
-        if (variant === "hero") {
-            return _jsx(HeroSplash, { logo: logo, message: message, subtitle: subtitle, title: title });
-        }
-        return (_jsx(GradientContainer, { className: "flex-1", children: _jsxs(View, { className: "flex-1 justify-center items-center", children: [renderLogo(logo), _jsx(Loading, { message: message, size: "large" })] }) }));
+      };
+    };
+    t5 = [isReady, minDuration];
+    $[0] = isReady;
+    $[1] = minDuration;
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t4 = $[2];
+    t5 = $[3];
+  }
+  useEffect(t4, t5);
+  if (!showContent) {
+    if (variant === "hero") {
+      let t6;
+      if ($[4] !== logo || $[5] !== message || $[6] !== subtitle || $[7] !== title) {
+        t6 = _jsx(HeroSplash, {
+          logo: logo,
+          message: message,
+          subtitle: subtitle,
+          title: title
+        });
+        $[4] = logo;
+        $[5] = message;
+        $[6] = subtitle;
+        $[7] = title;
+        $[8] = t6;
+      } else {
+        t6 = $[8];
+      }
+      return t6;
+    }
+    let t6;
+    if ($[9] !== logo) {
+      t6 = renderLogo(logo);
+      $[9] = logo;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] !== message) {
+      t7 = _jsx(Loading, {
+        message: message,
+        size: "large"
+      });
+      $[11] = message;
+      $[12] = t7;
+    } else {
+      t7 = $[12];
+    }
+    let t8;
+    if ($[13] !== t6 || $[14] !== t7) {
+      t8 = _jsx(GradientContainer, {
+        className: "flex-1",
+        children: _jsxs(View, {
+          className: "flex-1 justify-center items-center",
+          children: [t6, t7]
+        })
+      });
+      $[13] = t6;
+      $[14] = t7;
+      $[15] = t8;
+    } else {
+      t8 = $[15];
     }
-    return children;
+    return t8;
+  }
+  return children;
 }
 export default Splash;

package/dist/Feedback/Feedback.State.d.ts

@@ -0,0 +1,17 @@
+import { type EmptyStateProps } from "./Feedback.EmptyState.js";
+import { type ErrorProps } from "./Feedback.Error.js";
+import { type LoadingStateProps } from "./Feedback.Loading.js";
+export type FeedbackStateProps = ({
+    kind: "loading";
+} & LoadingStateProps) | ({
+    kind: "empty";
+} & Partial<EmptyStateProps>) | ({
+    kind: "error";
+} & ErrorProps);
+/**
+ * One entry point for the three states a screen or template can be in.
+ * `empty` with a `title` is the configurable EmptyState; without one it keeps
+ * the original "no records" look that list and form templates already show.
+ */
+declare function State(props: FeedbackStateProps): import("react").JSX.Element;
+export default State;

package/dist/Feedback/Feedback.State.js

@@ -0,0 +1,104 @@
+import { c as _c } from "react/compiler-runtime";
+import Empty from "./Feedback.Empty.js";
+import EmptyState from "./Feedback.EmptyState.js";
+import ErrorState from "./Feedback.Error.js";
+import Loading from "./Feedback.Loading.js";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+/**
+ * One entry point for the three states a screen or template can be in.
+ * `empty` with a `title` is the configurable EmptyState; without one it keeps
+ * the original "no records" look that list and form templates already show.
+ */
+function State(props) {
+  const $ = _c(14);
+  switch (props.kind) {
+    case "loading":
+      {
+        let loading;
+        if ($[0] !== props) {
+          const {
+            kind: _kind_1,
+            ...t0
+          } = props;
+          loading = t0;
+          $[0] = props;
+          $[1] = loading;
+        } else {
+          loading = $[1];
+        }
+        let t0;
+        if ($[2] !== loading) {
+          t0 = _jsx(Loading, {
+            ...loading
+          });
+          $[2] = loading;
+          $[3] = t0;
+        } else {
+          t0 = $[3];
+        }
+        return t0;
+      }
+    case "error":
+      {
+        let error;
+        if ($[4] !== props) {
+          const {
+            kind: _kind_0,
+            ...t0
+          } = props;
+          error = t0;
+          $[4] = props;
+          $[5] = error;
+        } else {
+          error = $[5];
+        }
+        let t0;
+        if ($[6] !== error) {
+          t0 = _jsx(ErrorState, {
+            ...error
+          });
+          $[6] = error;
+          $[7] = t0;
+        } else {
+          t0 = $[7];
+        }
+        return t0;
+      }
+    case "empty":
+      {
+        let empty;
+        let title;
+        if ($[8] !== props) {
+          const {
+            kind: _kind,
+            title: t0,
+            ...t1
+          } = props;
+          title = t0;
+          empty = t1;
+          $[8] = props;
+          $[9] = empty;
+          $[10] = title;
+        } else {
+          empty = $[9];
+          title = $[10];
+        }
+        let t0;
+        if ($[11] !== empty || $[12] !== title) {
+          t0 = title ? _jsx(EmptyState, {
+            ...empty,
+            title: title
+          }) : _jsx(Empty, {
+            className: empty.className
+          });
+          $[11] = empty;
+          $[12] = title;
+          $[13] = t0;
+        } else {
+          t0 = $[13];
+        }
+        return t0;
+      }
+  }
+}
+export default State;