@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Display/Display.StoryTray.js

@@ -1,44 +1,364 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import ExpoImage from "./Display.ExpoImage.js";
 import Icon from "./Display.Icon.js";
 import Story from "./Display.Story.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { ScrollView, View } from "react-native";
-function CreateCard({ create, size }) {
-    const w = size * 1.6;
-    return (_jsxs(Pressable, { accessibilityLabel: create.label ?? "Crear historia", accessibilityRole: "button", onPress: create.onPress, style: {
-            width: w,
-            borderRadius: 14,
-            overflow: "hidden",
-            backgroundColor: theme.bg.card,
-            borderWidth: 1,
-            borderColor: theme.border.light,
-        }, children: [create.image ? (_jsx(ExpoImage, { source: create.image, style: { width: "100%", height: size * 1.7 } })) : (_jsx(View, { style: { width: "100%", height: size * 1.7, backgroundColor: theme.bg.muted } })), _jsxs(View, { style: { alignItems: "center", paddingVertical: 14 }, children: [_jsx(View, { style: {
-                            position: "absolute",
-                            top: -16,
-                            width: 32,
-                            height: 32,
-                            borderRadius: 16,
-                            backgroundColor: theme.primary,
-                            alignItems: "center",
-                            justifyContent: "center",
-                            borderWidth: 3,
-                            borderColor: theme.bg.card,
-                        }, children: _jsx(Icon, { color: theme.text.inverse, name: "add", size: 20 }) }), _jsx(Typography.Text, { className: "text-text-primary mt-2", semibold: true, variant: "caption", children: create.label ?? "Crear historia" })] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function CreateCard(t0) {
+  const $ = _c(28);
+  const {
+    create,
+    size
+  } = t0;
+  const theme = useTheme();
+  const w = size * 1.6;
+  const t1 = create.label ?? "Crear historia";
+  let t2;
+  if ($[0] !== theme.bg.card || $[1] !== theme.border.light || $[2] !== w) {
+    t2 = {
+      width: w,
+      borderRadius: 14,
+      overflow: "hidden",
+      backgroundColor: theme.bg.card,
+      borderWidth: 1,
+      borderColor: theme.border.light
+    };
+    $[0] = theme.bg.card;
+    $[1] = theme.border.light;
+    $[2] = w;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== create.image || $[5] !== size || $[6] !== theme.bg.muted) {
+    t3 = create.image ? _jsx(ExpoImage, {
+      source: create.image,
+      style: {
+        width: "100%",
+        height: size * 1.7
+      }
+    }) : _jsx(View, {
+      style: {
+        width: "100%",
+        height: size * 1.7,
+        backgroundColor: theme.bg.muted
+      }
+    });
+    $[4] = create.image;
+    $[5] = size;
+    $[6] = theme.bg.muted;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      alignItems: "center",
+      paddingVertical: 14
+    };
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== theme.bg.card || $[10] !== theme.primary) {
+    t5 = {
+      position: "absolute",
+      top: -16,
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      backgroundColor: theme.primary,
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 3,
+      borderColor: theme.bg.card
+    };
+    $[9] = theme.bg.card;
+    $[10] = theme.primary;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== theme.text.inverse) {
+    t6 = _jsx(Icon, {
+      color: theme.text.inverse,
+      name: "add",
+      size: 20
+    });
+    $[12] = theme.text.inverse;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== t5 || $[15] !== t6) {
+    t7 = _jsx(View, {
+      style: t5,
+      children: t6
+    });
+    $[14] = t5;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  const t8 = create.label ?? "Crear historia";
+  let t9;
+  if ($[17] !== t8) {
+    t9 = _jsx(Typography.Text, {
+      className: "text-text-primary mt-2",
+      semibold: true,
+      variant: "caption",
+      children: t8
+    });
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== t7 || $[20] !== t9) {
+    t10 = _jsxs(View, {
+      style: t4,
+      children: [t7, t9]
+    });
+    $[19] = t7;
+    $[20] = t9;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  let t11;
+  if ($[22] !== create.onPress || $[23] !== t1 || $[24] !== t10 || $[25] !== t2 || $[26] !== t3) {
+    t11 = _jsxs(Pressable, {
+      accessibilityLabel: t1,
+      accessibilityRole: "button",
+      onPress: create.onPress,
+      style: t2,
+      children: [t3, t10]
+    });
+    $[22] = create.onPress;
+    $[23] = t1;
+    $[24] = t10;
+    $[25] = t2;
+    $[26] = t3;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  return t11;
 }
-function CreateCircle({ create, size }) {
-    return (_jsxs(Pressable, { accessibilityLabel: create.label ?? "Crear historia", accessibilityRole: "button", onPress: create.onPress, style: { alignItems: "center", width: size + 8, gap: 4 }, children: [_jsx(View, { style: {
-                    width: size,
-                    height: size,
-                    borderRadius: size / 2,
-                    backgroundColor: theme.bg.muted,
-                    alignItems: "center",
-                    justifyContent: "center",
-                }, children: _jsx(Icon, { color: theme.primary, name: "add-circle", size: size * 0.5 }) }), _jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, style: { maxWidth: size + 6 }, variant: "caption", children: create.label ?? "Crear" })] }));
+function CreateCircle(t0) {
+  const $ = _c(23);
+  const {
+    create,
+    size
+  } = t0;
+  const theme = useTheme();
+  const t1 = create.label ?? "Crear historia";
+  const t2 = size + 8;
+  let t3;
+  if ($[0] !== t2) {
+    t3 = {
+      alignItems: "center",
+      width: t2,
+      gap: 4
+    };
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const t4 = size / 2;
+  let t5;
+  if ($[2] !== size || $[3] !== t4 || $[4] !== theme.bg.muted) {
+    t5 = {
+      width: size,
+      height: size,
+      borderRadius: t4,
+      backgroundColor: theme.bg.muted,
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[2] = size;
+    $[3] = t4;
+    $[4] = theme.bg.muted;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const t6 = size * 0.5;
+  let t7;
+  if ($[6] !== t6 || $[7] !== theme.primary) {
+    t7 = _jsx(Icon, {
+      color: theme.primary,
+      name: "add-circle",
+      size: t6
+    });
+    $[6] = t6;
+    $[7] = theme.primary;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== t5 || $[10] !== t7) {
+    t8 = _jsx(View, {
+      style: t5,
+      children: t7
+    });
+    $[9] = t5;
+    $[10] = t7;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  const t9 = size + 6;
+  let t10;
+  if ($[12] !== t9) {
+    t10 = {
+      maxWidth: t9
+    };
+    $[12] = t9;
+    $[13] = t10;
+  } else {
+    t10 = $[13];
+  }
+  const t11 = create.label ?? "Crear";
+  let t12;
+  if ($[14] !== t10 || $[15] !== t11) {
+    t12 = _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      numberOfLines: 1,
+      style: t10,
+      variant: "caption",
+      children: t11
+    });
+    $[14] = t10;
+    $[15] = t11;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] !== create.onPress || $[18] !== t1 || $[19] !== t12 || $[20] !== t3 || $[21] !== t8) {
+    t13 = _jsxs(Pressable, {
+      accessibilityLabel: t1,
+      accessibilityRole: "button",
+      onPress: create.onPress,
+      style: t3,
+      children: [t8, t12]
+    });
+    $[17] = create.onPress;
+    $[18] = t1;
+    $[19] = t12;
+    $[20] = t3;
+    $[21] = t8;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  return t13;
 }
-function StoryTray({ stories, onStoryPress, create, variant = "card", size = 68, showAvatar = true, className, testID, }) {
-    return (_jsxs(ScrollView, { className: className, contentContainerStyle: { gap: 8, paddingHorizontal: 12, paddingVertical: 4 }, horizontal: true, showsHorizontalScrollIndicator: false, testID: testID, children: [create ? (variant === "card" ? (_jsx(CreateCard, { create: create, size: size })) : (_jsx(CreateCircle, { create: create, size: size }))) : null, stories.map((item) => (_jsx(Story, { avatar: item.avatar, image: item.image, label: item.label, onPress: () => onStoryPress?.(item), seen: item.seen, showAvatar: showAvatar, size: size, variant: variant }, item.id)))] }));
+function StoryTray(t0) {
+  const $ = _c(21);
+  const {
+    stories,
+    onStoryPress,
+    create,
+    variant: t1,
+    size: t2,
+    showAvatar: t3,
+    className,
+    testID
+  } = t0;
+  const variant = t1 === undefined ? "card" : t1;
+  const size = t2 === undefined ? 68 : t2;
+  const showAvatar = t3 === undefined ? true : t3;
+  let t4;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      gap: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 4
+    };
+    $[0] = t4;
+  } else {
+    t4 = $[0];
+  }
+  let t5;
+  if ($[1] !== create || $[2] !== size || $[3] !== variant) {
+    t5 = create ? variant === "card" ? _jsx(CreateCard, {
+      create: create,
+      size: size
+    }) : _jsx(CreateCircle, {
+      create: create,
+      size: size
+    }) : null;
+    $[1] = create;
+    $[2] = size;
+    $[3] = variant;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] !== onStoryPress || $[6] !== showAvatar || $[7] !== size || $[8] !== stories || $[9] !== variant) {
+    let t7;
+    if ($[11] !== onStoryPress || $[12] !== showAvatar || $[13] !== size || $[14] !== variant) {
+      t7 = item => _jsx(Story, {
+        avatar: item.avatar,
+        image: item.image,
+        label: item.label,
+        onPress: () => onStoryPress?.(item),
+        seen: item.seen,
+        showAvatar: showAvatar,
+        size: size,
+        variant: variant
+      }, item.id);
+      $[11] = onStoryPress;
+      $[12] = showAvatar;
+      $[13] = size;
+      $[14] = variant;
+      $[15] = t7;
+    } else {
+      t7 = $[15];
+    }
+    t6 = stories.map(t7);
+    $[5] = onStoryPress;
+    $[6] = showAvatar;
+    $[7] = size;
+    $[8] = stories;
+    $[9] = variant;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[16] !== className || $[17] !== t5 || $[18] !== t6 || $[19] !== testID) {
+    t7 = _jsxs(ScrollView, {
+      className: className,
+      contentContainerStyle: t4,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      testID: testID,
+      children: [t5, t6]
+    });
+    $[16] = className;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = testID;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  return t7;
 }
 export default StoryTray;