@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Display/Display.SwipeableRow.js

@@ -1,29 +1,157 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "./Display.Icon.js";
 import { useTheme } from "../theme/index.js";
+import { resolveOnColor } from "../theme/contrast.js";
 import { Typography } from "../Typography/index.js";
 import { useRef } from "react";
 import { TouchableOpacity, View } from "react-native";
 import Swipeable from "react-native-gesture-handler/ReanimatedSwipeable";
-function ActionButtons({ actions, onDone, }) {
-    const theme = useTheme();
-    return (_jsx(View, { style: { flexDirection: "row" }, children: actions.map((action, index) => (_jsxs(TouchableOpacity, { accessibilityLabel: action.label ?? "Acción", accessibilityRole: "button", activeOpacity: 0.8, onPress: () => {
-                onDone();
-                action.onPress();
-            }, style: {
-                backgroundColor: action.color ?? theme.danger,
-                justifyContent: "center",
-                alignItems: "center",
-                paddingHorizontal: 20,
-            }, children: [action.icon ? (_jsx(Icon, { color: theme.text.inverse, name: action.icon, size: 20 })) : null, action.label ? (_jsx(Typography.Text, { className: "text-text-inverse text-xs mt-1", children: action.label })) : null] }, index))) }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function ActionButtons(t0) {
+  const $ = _c(10);
+  const {
+    actions,
+    onDone
+  } = t0;
+  const theme = useTheme();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      flexDirection: "row"
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== actions || $[2] !== onDone || $[3] !== theme) {
+    let t3;
+    if ($[5] !== onDone || $[6] !== theme) {
+      t3 = (action, index) => {
+        const ink = action.color ? resolveOnColor(action.color) : theme.text.onDanger;
+        return _jsxs(TouchableOpacity, {
+          accessibilityLabel: action.label ?? "Acci\xF3n",
+          accessibilityRole: "button",
+          activeOpacity: 0.8,
+          onPress: () => {
+            onDone();
+            action.onPress();
+          },
+          style: {
+            backgroundColor: action.color ?? theme.danger,
+            justifyContent: "center",
+            alignItems: "center",
+            paddingHorizontal: 20
+          },
+          children: [action.icon ? _jsx(Icon, {
+            color: ink,
+            name: action.icon,
+            size: 20
+          }) : null, action.label ? _jsx(Typography.Text, {
+            className: "mt-1",
+            style: {
+              color: ink
+            },
+            children: action.label
+          }) : null]
+        }, index);
+      };
+      $[5] = onDone;
+      $[6] = theme;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    t2 = actions.map(t3);
+    $[1] = actions;
+    $[2] = onDone;
+    $[3] = theme;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[8] !== t2) {
+    t3 = _jsx(View, {
+      style: t1,
+      children: t2
+    });
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
 }
-function SwipeableRow({ children, visibleActions, rightActions, leftActions, testID, }) {
-    const ref = useRef(null);
-    const close = () => ref.current?.close();
-    return (_jsxs(Swipeable, { ref: ref, renderLeftActions: leftActions?.length
-            ? () => _jsx(ActionButtons, { actions: leftActions, onDone: close })
-            : undefined, renderRightActions: rightActions?.length
-            ? () => _jsx(ActionButtons, { actions: rightActions, onDone: close })
-            : undefined, testID: testID, children: [children, visibleActions ? _jsx(View, { className: "flex-row", children: visibleActions }) : null] }));
+function SwipeableRow(t0) {
+  const $ = _c(13);
+  const {
+    children,
+    visibleActions,
+    rightActions,
+    leftActions,
+    testID
+  } = t0;
+  const ref = useRef(null);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => ref.current?.close();
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const close = t1;
+  let t2;
+  if ($[1] !== leftActions) {
+    t2 = leftActions?.length ? () => _jsx(ActionButtons, {
+      actions: leftActions,
+      onDone: close
+    }) : undefined;
+    $[1] = leftActions;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== rightActions) {
+    t3 = rightActions?.length ? () => _jsx(ActionButtons, {
+      actions: rightActions,
+      onDone: close
+    }) : undefined;
+    $[3] = rightActions;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== visibleActions) {
+    t4 = visibleActions ? _jsx(View, {
+      className: "flex-row",
+      children: visibleActions
+    }) : null;
+    $[5] = visibleActions;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== children || $[8] !== t2 || $[9] !== t3 || $[10] !== t4 || $[11] !== testID) {
+    t5 = _jsxs(Swipeable, {
+      ref: ref,
+      renderLeftActions: t2,
+      renderRightActions: t3,
+      testID: testID,
+      children: [children, t4]
+    });
+    $[7] = children;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = testID;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
 }
 export default SwipeableRow;

package/dist/Display/Display.Tag.d.ts

@@ -1,3 +1,4 @@
+import type { typographyVariants } from "../theme/typography.js";
 import type { ReactNode } from "react";
 export interface TagProps {
     label: string;
@@ -5,7 +6,9 @@ export interface TagProps {
     dotColor?: string;
     className?: string;
     testID?: string;
+    /** Typography variant of the label. Defaults to the shared pill metrics (12/16). */
+    textVariant?: keyof typeof typographyVariants;
 }
-declare function Tag({ label, leading, dotColor, className, testID }: TagProps): import("react").JSX.Element;
+declare function Tag({ label, leading, dotColor, className, testID, textVariant }: TagProps): import("react").JSX.Element;
 export default Tag;
 export { Tag };

package/dist/Display/Display.Tag.js

@@ -1,9 +1,71 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { PillLabel } from "./pill.js";
 import { cn } from "../theme/tw.js";
-import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function Tag({ label, leading, dotColor, className, testID }) {
-    return (_jsxs(View, { className: cn("flex-row items-center self-start rounded-full bg-bg-muted px-2.5 py-1 gap-1.5", className), testID: testID, children: [dotColor ? (_jsx(View, { style: { width: 8, height: 8, borderRadius: 4, backgroundColor: dotColor } })) : null, leading, _jsx(Typography.Text, { className: "text-text-secondary text-xs font-medium", numberOfLines: 1, children: label })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function Tag(t0) {
+  const $ = _c(13);
+  const {
+    label,
+    leading,
+    dotColor,
+    className,
+    testID,
+    textVariant
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("flex-row items-center self-start rounded-full bg-bg-muted px-2.5 py-1 gap-1.5", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== dotColor) {
+    t2 = dotColor ? _jsx(View, {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: dotColor
+      }
+    }) : null;
+    $[2] = dotColor;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== label || $[5] !== textVariant) {
+    t3 = _jsx(PillLabel, {
+      className: "text-text-secondary",
+      variant: textVariant,
+      children: label
+    });
+    $[4] = label;
+    $[5] = textVariant;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== leading || $[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== testID) {
+    t4 = _jsxs(View, {
+      className: t1,
+      testID: testID,
+      children: [t2, leading, t3]
+    });
+    $[7] = leading;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = testID;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
 }
 export default Tag;
 export { Tag };

package/dist/Display/Display.Timeline.js

@@ -1,19 +1,108 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "./Display.Icon.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function Timeline({ steps, current, className, testID }) {
-    return (_jsx(View, { className: className, testID: testID, children: steps.map((step, index) => {
-            const done = index < current;
-            const active = index === current;
-            const reached = done || active;
-            const isLast = index === steps.length - 1;
-            const dotColor = reached ? theme.primary : theme.bg.muted;
-            return (_jsxs(View, { className: "flex-row", children: [_jsxs(View, { className: "items-center", style: { width: 28 }, children: [_jsx(View, { className: "w-6 h-6 rounded-full items-center justify-center", style: { backgroundColor: dotColor }, children: done ? (_jsx(Icon, { color: theme.text.inverse, name: "check", size: 14 })) : (_jsx(View, { className: "w-2 h-2 rounded-full", style: {
-                                        backgroundColor: active ? theme.text.inverse : theme.border.strong,
-                                    } })) }), !isLast ? (_jsx(View, { className: "flex-1 w-0.5 my-1", style: { backgroundColor: done ? theme.primary : theme.border.default } })) : null] }), _jsxs(View, { className: cn("flex-1 pb-5", isLast && "pb-0"), children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Typography.Text, { className: reached ? "text-text-primary" : "text-text-tertiary", semibold: active, variant: "body", children: step.title }), step.time ? (_jsx(Typography.Text, { className: "text-text-tertiary", variant: "caption", children: step.time })) : null] }), step.description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: step.description })) : null] })] }, step.title));
-        }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function Timeline(t0) {
+  const $ = _c(12);
+  const {
+    steps,
+    current,
+    className,
+    testID
+  } = t0;
+  const theme = useTheme();
+  let t1;
+  if ($[0] !== current || $[1] !== steps || $[2] !== theme) {
+    let t2;
+    if ($[4] !== current || $[5] !== steps.length || $[6] !== theme) {
+      t2 = (step, index) => {
+        const done = index < current;
+        const active = index === current;
+        const reached = done || active;
+        const isLast = index === steps.length - 1;
+        const dotColor = reached ? theme.primary : theme.bg.muted;
+        return _jsxs(View, {
+          className: "flex-row",
+          children: [_jsxs(View, {
+            className: "items-center",
+            style: {
+              width: 28
+            },
+            children: [_jsx(View, {
+              className: "w-6 h-6 rounded-full items-center justify-center",
+              style: {
+                backgroundColor: dotColor
+              },
+              children: done ? _jsx(Icon, {
+                color: theme.text.inverse,
+                name: "check",
+                size: 14
+              }) : _jsx(View, {
+                className: "w-2 h-2 rounded-full",
+                style: {
+                  backgroundColor: active ? theme.text.inverse : theme.border.strong
+                }
+              })
+            }), !isLast ? _jsx(View, {
+              className: "flex-1 w-0.5 my-1",
+              style: {
+                backgroundColor: done ? theme.primary : theme.border.default
+              }
+            }) : null]
+          }), _jsxs(View, {
+            className: cn("flex-1 pb-5", isLast && "pb-0"),
+            children: [_jsxs(View, {
+              className: "flex-row items-center justify-between",
+              children: [_jsx(Typography.Text, {
+                className: reached ? "text-text-primary" : "text-text-tertiary",
+                semibold: active,
+                variant: "body",
+                children: step.title
+              }), step.time ? _jsx(Typography.Text, {
+                className: "text-text-tertiary",
+                variant: "caption",
+                children: step.time
+              }) : null]
+            }), step.description ? _jsx(Typography.Text, {
+              className: "text-text-secondary",
+              variant: "bodySmall",
+              children: step.description
+            }) : null]
+          })]
+        }, step.title);
+      };
+      $[4] = current;
+      $[5] = steps.length;
+      $[6] = theme;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    t1 = steps.map(t2);
+    $[0] = current;
+    $[1] = steps;
+    $[2] = theme;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[8] !== className || $[9] !== t1 || $[10] !== testID) {
+    t2 = _jsx(View, {
+      className: className,
+      testID: testID,
+      children: t1
+    });
+    $[8] = className;
+    $[9] = t1;
+    $[10] = testID;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  return t2;
 }
 export default Timeline;

package/dist/Display/Display.Tooltip.js

@@ -1,35 +1,131 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 function resolvePosition(placement) {
-    switch (placement) {
-        case "bottom":
-            return { top: "100%", left: 0, marginVertical: 6 };
-        case "left":
-            return { right: "100%", top: 0, marginHorizontal: 6 };
-        case "right":
-            return { left: "100%", top: 0, marginHorizontal: 6 };
-        case "top":
-        default:
-            return { bottom: "100%", left: 0, marginVertical: 6 };
-    }
+  switch (placement) {
+    case "bottom":
+      return {
+        top: "100%",
+        left: 0,
+        marginVertical: 6
+      };
+    case "left":
+      return {
+        right: "100%",
+        top: 0,
+        marginHorizontal: 6
+      };
+    case "right":
+      return {
+        left: "100%",
+        top: 0,
+        marginHorizontal: 6
+      };
+    case "top":
+    default:
+      return {
+        bottom: "100%",
+        left: 0,
+        marginVertical: 6
+      };
+  }
+}
+function Tooltip(t0) {
+  const $ = _c(15);
+  const {
+    content,
+    children,
+    placement: t1,
+    width: t2,
+    testID
+  } = t0;
+  const placement = t1 === undefined ? "top" : t1;
+  const width = t2 === undefined ? 200 : t2;
+  const theme = useTheme();
+  const [visible, setVisible] = useState(false);
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      position: "relative",
+      alignSelf: "flex-start"
+    };
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  let t4;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => setVisible(_temp);
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== children || $[3] !== content) {
+    t5 = _jsx(Pressable, {
+      accessibilityHint: content,
+      accessibilityRole: "button",
+      onPress: t4,
+      children: children
+    });
+    $[2] = children;
+    $[3] = content;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] !== content || $[6] !== placement || $[7] !== theme || $[8] !== visible || $[9] !== width) {
+    t6 = visible ? _jsx(View, {
+      style: {
+        position: "absolute",
+        ...resolvePosition(placement),
+        width,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        borderRadius: 8,
+        backgroundColor: theme.text.primary,
+        ...theme.shadow.md,
+        zIndex: 1700
+      },
+      children: _jsx(Typography.Text, {
+        style: {
+          color: theme.bg.card
+        },
+        variant: "bodySmall",
+        children: content
+      })
+    }) : null;
+    $[5] = content;
+    $[6] = placement;
+    $[7] = theme;
+    $[8] = visible;
+    $[9] = width;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== t5 || $[12] !== t6 || $[13] !== testID) {
+    t7 = _jsxs(View, {
+      style: t3,
+      testID: testID,
+      children: [t5, t6]
+    });
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = testID;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  return t7;
 }
-function Tooltip({ content, children, placement = "top", width = 200, testID, }) {
-    const theme = useTheme();
-    const [visible, setVisible] = useState(false);
-    return (_jsxs(View, { style: { position: "relative", alignSelf: "flex-start" }, testID: testID, children: [_jsx(Pressable, { accessibilityHint: content, accessibilityRole: "button", onPress: () => setVisible((v) => !v), children: children }), visible ? (_jsx(View, { style: {
-                    position: "absolute",
-                    ...resolvePosition(placement),
-                    width,
-                    paddingHorizontal: 10,
-                    paddingVertical: 8,
-                    borderRadius: 8,
-                    backgroundColor: theme.text.primary,
-                    ...theme.shadow.md,
-                    zIndex: 1700,
-                }, children: _jsx(Typography.Text, { style: { color: theme.bg.card }, variant: "bodySmall", children: content }) })) : null] }));
+function _temp(v) {
+  return !v;
 }
 export default Tooltip;

package/dist/Display/chevron.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The disclosure chevron of every navigational row (`MenuButton`, `ListItem`): the native
+ * chevron at the size of the text glyph the menus used, hidden from screen readers
+ * because the row already announces itself as a button.
+ */
+export declare function Chevron(): import("react").JSX.Element;

package/dist/Display/chevron.js

@@ -0,0 +1,32 @@
+import { c as _c } from "react/compiler-runtime";
+import Icon from "./Display.Icon.js";
+import { useTheme } from "../theme/index.js";
+import { View } from "react-native";
+
+/**
+ * The disclosure chevron of every navigational row (`MenuButton`, `ListItem`): the native
+ * chevron at the size of the text glyph the menus used, hidden from screen readers
+ * because the row already announces itself as a button.
+ */
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+export function Chevron() {
+  const $ = _c(2);
+  const theme = useTheme();
+  let t0;
+  if ($[0] !== theme.icon.tertiary) {
+    t0 = _jsx(View, {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: _jsx(Icon, {
+        color: theme.icon.tertiary,
+        name: "next",
+        size: 10
+      })
+    });
+    $[0] = theme.icon.tertiary;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}

package/dist/Display/count-badge.d.ts

@@ -0,0 +1,21 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface CountBadgeProps {
+    /** Number or short text. Numbers above `max` read `max+`. */
+    count?: number | string;
+    max?: number;
+    /** A bare dot instead of a count. */
+    dot?: boolean;
+    /** Fill of the badge. Defaults to `danger`. */
+    color?: string;
+    /** Ring that separates the badge from what it sits on. Defaults to the card surface. */
+    ringColor?: string;
+    /** Pins the badge over the top-right corner of its parent. */
+    anchor?: {
+        top: number;
+        right: number;
+    };
+    style?: StyleProp<ViewStyle>;
+}
+export declare function countLabel(count: number | string, max: number): string;
+/** The one notification count of the DS: icon badges, app bar actions, tabs and menu rows. */
+export declare function CountBadge({ count, max, dot, color, ringColor, anchor, style, }: CountBadgeProps): import("react").JSX.Element | null;