@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Navigation/Navigation.Tabs.js

@@ -1,58 +1,466 @@
-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 { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { createContext, useCallback, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const TabsContext = createContext(null);
 function useTabs() {
-    const ctx = useContext(TabsContext);
-    if (!ctx) {
-        throw new Error("Tabs.* debe usarse dentro de <Tabs>");
-    }
-    return ctx;
+  const ctx = useContext(TabsContext);
+  if (!ctx) {
+    throw new Error("Tabs.* debe usarse dentro de <Tabs>");
+  }
+  return ctx;
 }
-function TabsRoot({ value, defaultValue, onValueChange, variant = "underline", className, children, }) {
-    const [internal, setInternal] = useState(defaultValue ?? "");
-    const current = value ?? internal;
-    const setValue = useCallback((next) => {
-        if (value === undefined)
-            setInternal(next);
-        onValueChange?.(next);
-    }, [value, onValueChange]);
-    return (_jsx(TabsContext.Provider, { value: { value: current, setValue, variant }, children: _jsx(View, { className: cn("flex-1", className), children: children }) }));
+function TabsRoot(t0) {
+  const $ = _c(15);
+  const {
+    value,
+    defaultValue,
+    onValueChange,
+    variant: t1,
+    className,
+    children
+  } = t0;
+  const variant = t1 === undefined ? "underline" : t1;
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const current = value ?? internal;
+  let t2;
+  if ($[0] !== onValueChange || $[1] !== value) {
+    t2 = next => {
+      if (value === undefined) {
+        setInternal(next);
+      }
+      onValueChange?.(next);
+    };
+    $[0] = onValueChange;
+    $[1] = value;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const setValue = t2;
+  let t3;
+  if ($[3] !== current || $[4] !== setValue || $[5] !== variant) {
+    t3 = {
+      value: current,
+      setValue,
+      variant
+    };
+    $[3] = current;
+    $[4] = setValue;
+    $[5] = variant;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const context = t3;
+  let t4;
+  if ($[7] !== className) {
+    t4 = cn("flex-1", className);
+    $[7] = className;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== children || $[10] !== t4) {
+    t5 = _jsx(View, {
+      className: t4,
+      children: children
+    });
+    $[9] = children;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== context || $[13] !== t5) {
+    t6 = _jsx(TabsContext.Provider, {
+      value: context,
+      children: t5
+    });
+    $[12] = context;
+    $[13] = t5;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  return t6;
 }
-function TabsList({ children, className }) {
-    const { variant } = useTabs();
-    if (variant === "filled") {
-        return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row rounded-xl p-1", className), style: { backgroundColor: "#E5E7EB" }, children: children }));
+function TabsList(t0) {
+  const $ = _c(11);
+  const {
+    children,
+    className
+  } = t0;
+  const {
+    variant
+  } = useTabs();
+  if (variant === "filled") {
+    let t1;
+    if ($[0] !== className) {
+      t1 = cn("flex-row rounded-xl p-1", className);
+      $[0] = className;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        backgroundColor: "#E5E7EB"
+      };
+      $[2] = t2;
+    } else {
+      t2 = $[2];
     }
-    return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row border-b border-border-default", className), children: children }));
+    let t3;
+    if ($[3] !== children || $[4] !== t1) {
+      t3 = _jsx(View, {
+        accessibilityRole: "tablist",
+        className: t1,
+        style: t2,
+        children: children
+      });
+      $[3] = children;
+      $[4] = t1;
+      $[5] = t3;
+    } else {
+      t3 = $[5];
+    }
+    return t3;
+  }
+  let t1;
+  if ($[6] !== className) {
+    t1 = cn("flex-row border-b border-border-default", className);
+    $[6] = className;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== children || $[9] !== t1) {
+    t2 = _jsx(View, {
+      accessibilityRole: "tablist",
+      className: t1,
+      children: children
+    });
+    $[8] = children;
+    $[9] = t1;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  return t2;
 }
-function TabsTrigger({ value, children, icon, iconLayout = "left" }) {
-    const theme = useTheme();
-    const { value: active, setValue, variant } = useTabs();
-    const selected = active === value;
-    const iconColor = selected ? theme.text.accent : theme.text.secondary;
-    if (variant === "filled") {
-        return (_jsx(TouchableOpacity, { accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, className: "flex-1 items-center justify-center rounded-lg py-2", onPress: () => setValue(value), style: selected ? { backgroundColor: theme.bg.card, ...theme.shadow.sm } : {}, children: _jsxs(View, { className: cn("items-center", iconLayout === "left" && icon ? "flex-row gap-1.5" : "gap-1"), children: [icon && iconLayout === "top" && _jsx(Icon, { color: iconColor, name: icon, size: 16 }), icon && iconLayout === "left" && _jsx(Icon, { color: iconColor, name: icon, size: 14 }), _jsx(Typography.Text, { semibold: selected, style: { color: iconColor }, variant: "bodySmall", children: children })] }) }));
-    }
-    // underline variant
-    return (_jsxs(TouchableOpacity, { accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, className: "flex-1 items-center", onPress: () => setValue(value), children: [_jsxs(View, { className: cn("py-3", iconLayout === "top" && icon
-                    ? "items-center gap-1"
-                    : "flex-row items-center gap-1.5"), children: [icon && iconLayout === "top" && _jsx(Icon, { color: iconColor, name: icon, size: 18 }), icon && iconLayout === "left" && _jsx(Icon, { color: iconColor, name: icon, size: 14 }), _jsx(Typography.Text, { semibold: selected, style: { color: iconColor }, children: children })] }), _jsx(View, { className: "h-0.5 w-full", style: { backgroundColor: selected ? theme.primary : "transparent" } })] }));
+function TabsTrigger(t0) {
+  const $ = _c(68);
+  const {
+    value,
+    children,
+    icon,
+    iconLayout: t1
+  } = t0;
+  const iconLayout = t1 === undefined ? "left" : t1;
+  const theme = useTheme();
+  const {
+    value: active,
+    setValue,
+    variant
+  } = useTabs();
+  const selected = active === value;
+  const iconColor = selected ? theme.text.accent : theme.text.secondary;
+  if (variant === "filled") {
+    let t2;
+    if ($[0] !== selected) {
+      t2 = {
+        selected
+      };
+      $[0] = selected;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    let t3;
+    if ($[2] !== setValue || $[3] !== value) {
+      t3 = () => setValue(value);
+      $[2] = setValue;
+      $[3] = value;
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    let t4;
+    if ($[5] !== selected || $[6] !== theme.bg || $[7] !== theme.shadow) {
+      t4 = selected ? {
+        backgroundColor: theme.bg.card,
+        ...theme.shadow.sm
+      } : {};
+      $[5] = selected;
+      $[6] = theme.bg;
+      $[7] = theme.shadow;
+      $[8] = t4;
+    } else {
+      t4 = $[8];
+    }
+    const t5 = iconLayout === "left" && icon ? "flex-row gap-1.5" : "gap-1";
+    let t6;
+    if ($[9] !== t5) {
+      t6 = cn("items-center", t5);
+      $[9] = t5;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] !== icon || $[12] !== iconColor || $[13] !== iconLayout) {
+      t7 = icon && iconLayout === "top" && _jsx(Icon, {
+        color: iconColor,
+        name: icon,
+        size: 16
+      });
+      $[11] = icon;
+      $[12] = iconColor;
+      $[13] = iconLayout;
+      $[14] = t7;
+    } else {
+      t7 = $[14];
+    }
+    let t8;
+    if ($[15] !== icon || $[16] !== iconColor || $[17] !== iconLayout) {
+      t8 = icon && iconLayout === "left" && _jsx(Icon, {
+        color: iconColor,
+        name: icon,
+        size: 14
+      });
+      $[15] = icon;
+      $[16] = iconColor;
+      $[17] = iconLayout;
+      $[18] = t8;
+    } else {
+      t8 = $[18];
+    }
+    let t9;
+    if ($[19] !== iconColor) {
+      t9 = {
+        color: iconColor
+      };
+      $[19] = iconColor;
+      $[20] = t9;
+    } else {
+      t9 = $[20];
+    }
+    let t10;
+    if ($[21] !== children || $[22] !== selected || $[23] !== t9) {
+      t10 = _jsx(Typography.Text, {
+        semibold: selected,
+        style: t9,
+        variant: "bodySmall",
+        children: children
+      });
+      $[21] = children;
+      $[22] = selected;
+      $[23] = t9;
+      $[24] = t10;
+    } else {
+      t10 = $[24];
+    }
+    let t11;
+    if ($[25] !== t10 || $[26] !== t6 || $[27] !== t7 || $[28] !== t8) {
+      t11 = _jsxs(View, {
+        className: t6,
+        children: [t7, t8, t10]
+      });
+      $[25] = t10;
+      $[26] = t6;
+      $[27] = t7;
+      $[28] = t8;
+      $[29] = t11;
+    } else {
+      t11 = $[29];
+    }
+    let t12;
+    if ($[30] !== t11 || $[31] !== t2 || $[32] !== t3 || $[33] !== t4) {
+      t12 = _jsx(TouchableOpacity, {
+        accessibilityRole: "tab",
+        accessibilityState: t2,
+        activeOpacity: 0.7,
+        className: "flex-1 items-center justify-center rounded-lg py-2",
+        onPress: t3,
+        style: t4,
+        children: t11
+      });
+      $[30] = t11;
+      $[31] = t2;
+      $[32] = t3;
+      $[33] = t4;
+      $[34] = t12;
+    } else {
+      t12 = $[34];
+    }
+    return t12;
+  }
+  let t2;
+  if ($[35] !== selected) {
+    t2 = {
+      selected
+    };
+    $[35] = selected;
+    $[36] = t2;
+  } else {
+    t2 = $[36];
+  }
+  let t3;
+  if ($[37] !== setValue || $[38] !== value) {
+    t3 = () => setValue(value);
+    $[37] = setValue;
+    $[38] = value;
+    $[39] = t3;
+  } else {
+    t3 = $[39];
+  }
+  const t4 = iconLayout === "top" && icon ? "items-center gap-1" : "flex-row items-center gap-1.5";
+  let t5;
+  if ($[40] !== t4) {
+    t5 = cn("py-3", t4);
+    $[40] = t4;
+    $[41] = t5;
+  } else {
+    t5 = $[41];
+  }
+  let t6;
+  if ($[42] !== icon || $[43] !== iconColor || $[44] !== iconLayout) {
+    t6 = icon && iconLayout === "top" && _jsx(Icon, {
+      color: iconColor,
+      name: icon,
+      size: 18
+    });
+    $[42] = icon;
+    $[43] = iconColor;
+    $[44] = iconLayout;
+    $[45] = t6;
+  } else {
+    t6 = $[45];
+  }
+  let t7;
+  if ($[46] !== icon || $[47] !== iconColor || $[48] !== iconLayout) {
+    t7 = icon && iconLayout === "left" && _jsx(Icon, {
+      color: iconColor,
+      name: icon,
+      size: 14
+    });
+    $[46] = icon;
+    $[47] = iconColor;
+    $[48] = iconLayout;
+    $[49] = t7;
+  } else {
+    t7 = $[49];
+  }
+  let t8;
+  if ($[50] !== iconColor) {
+    t8 = {
+      color: iconColor
+    };
+    $[50] = iconColor;
+    $[51] = t8;
+  } else {
+    t8 = $[51];
+  }
+  let t9;
+  if ($[52] !== children || $[53] !== selected || $[54] !== t8) {
+    t9 = _jsx(Typography.Text, {
+      semibold: selected,
+      style: t8,
+      children: children
+    });
+    $[52] = children;
+    $[53] = selected;
+    $[54] = t8;
+    $[55] = t9;
+  } else {
+    t9 = $[55];
+  }
+  let t10;
+  if ($[56] !== t5 || $[57] !== t6 || $[58] !== t7 || $[59] !== t9) {
+    t10 = _jsxs(View, {
+      className: t5,
+      children: [t6, t7, t9]
+    });
+    $[56] = t5;
+    $[57] = t6;
+    $[58] = t7;
+    $[59] = t9;
+    $[60] = t10;
+  } else {
+    t10 = $[60];
+  }
+  const t11 = selected ? theme.primary : "transparent";
+  let t12;
+  if ($[61] !== t11) {
+    t12 = _jsx(View, {
+      className: "h-0.5 w-full",
+      style: {
+        backgroundColor: t11
+      }
+    });
+    $[61] = t11;
+    $[62] = t12;
+  } else {
+    t12 = $[62];
+  }
+  let t13;
+  if ($[63] !== t10 || $[64] !== t12 || $[65] !== t2 || $[66] !== t3) {
+    t13 = _jsxs(TouchableOpacity, {
+      accessibilityRole: "tab",
+      accessibilityState: t2,
+      activeOpacity: 0.7,
+      className: "flex-1 items-center",
+      onPress: t3,
+      children: [t10, t12]
+    });
+    $[63] = t10;
+    $[64] = t12;
+    $[65] = t2;
+    $[66] = t3;
+    $[67] = t13;
+  } else {
+    t13 = $[67];
+  }
+  return t13;
 }
-function TabsContent({ value, children }) {
-    const { value: active } = useTabs();
-    if (active !== value)
-        return null;
-    return _jsx(View, { className: "flex-1", children: children });
+function TabsContent(t0) {
+  const $ = _c(2);
+  const {
+    value,
+    children
+  } = t0;
+  const {
+    value: active
+  } = useTabs();
+  if (active !== value) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== children) {
+    t1 = _jsx(View, {
+      className: "flex-1",
+      children: children
+    });
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 }
 const Tabs = Object.assign(TabsRoot, {
-    List: TabsList,
-    Trigger: TabsTrigger,
-    Content: TabsContent,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
 });
 export default Tabs;
 export { Tabs };

package/dist/Navigation/index.d.ts

@@ -1,9 +1,7 @@
 import BottomNav from "./Navigation.BottomNav.js";
-import CollapsingHeader from "./Navigation.CollapsingHeader.js";
 import FloatingBar from "./Navigation.FloatingBar.js";
 import Menu from "./Navigation.Menu.js";
 import { MenuSection } from "./Navigation.MenuSection.js";
-import RowItem from "./Navigation.RowItem.js";
 import SearchBar from "./Navigation.SearchBar.js";
 import SearchSuggestions from "./Navigation.SearchSuggestions.js";
 import SegmentedControl from "./Navigation.SegmentedControl.js";
@@ -18,7 +16,12 @@ export declare const Navigation: {
         Action: ({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: import("./Navigation.AppBar.js").AppBarActionProps) => import("react").JSX.Element;
     };
     BottomNav: typeof BottomNav;
-    CollapsingHeader: typeof CollapsingHeader;
+    CollapsingHeader: (({ title, subtitle, scrollY, onBack, actions, largeHeight, safeArea, testID, }: import("./Navigation.CollapsingHeader.js").CollapsingHeaderProps) => import("react").JSX.Element) & {
+        Root: ({ children }: {
+            children: import("react").ReactNode;
+        }) => import("react").JSX.Element;
+        ScrollView: (props: Omit<import("react-native").ScrollViewProps, "onScroll">) => import("react").JSX.Element;
+    };
     FloatingBar: typeof FloatingBar;
     SearchBar: typeof SearchBar;
     Search: {
@@ -30,7 +33,9 @@ export declare const Navigation: {
         Suggestions: (props: import("./Navigation.SearchSuggestions.js").SearchSuggestionsProps) => import("react").JSX.Element;
     };
     SearchSuggestions: typeof SearchSuggestions;
-    RowItem: typeof RowItem;
+    RowItem: import("react").MemoExoticComponent<({ item, className, onPress: onPressProp, readonly: readonlyProp, }: import("../views/types/IListView").IRowItemProps<any> & {
+        className?: string;
+    }) => import("react").JSX.Element>;
     SegmentedControl: typeof SegmentedControl;
     Tabs: (({ value, defaultValue, onValueChange, variant, className, children, }: import("./Navigation.Tabs.js").TabsProps) => import("react").JSX.Element) & {
         List: ({ children, className }: {

package/dist/Navigation/index.js

@@ -12,18 +12,18 @@ import SegmentedControl from "./Navigation.SegmentedControl.js";
 import Steps from "./Navigation.Steps.js";
 import Tabs from "./Navigation.Tabs.js";
 export const Navigation = {
-    AppBar,
-    BottomNav,
-    CollapsingHeader,
-    FloatingBar,
-    SearchBar,
-    Search,
-    SearchSuggestions,
-    RowItem,
-    SegmentedControl,
-    Tabs,
-    Menu,
-    MenuSection,
-    Steps,
+  AppBar,
+  BottomNav,
+  CollapsingHeader,
+  FloatingBar,
+  SearchBar,
+  Search,
+  SearchSuggestions,
+  RowItem,
+  SegmentedControl,
+  Tabs,
+  Menu,
+  MenuSection,
+  Steps
 };
 export default Navigation;

package/dist/Typography/Typography.Heading.js

@@ -1,6 +1,36 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { AppText } from "./Typography.Text.js";
-const Heading = ({ variant = "h1", ...props }) => {
-    return _jsx(AppText, { accessibilityRole: "header", variant: variant, ...props });
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const Heading = t0 => {
+  const $ = _c(6);
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      variant: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    props = $[1];
+    t1 = $[2];
+  }
+  const variant = t1 === undefined ? "h1" : t1;
+  let t2;
+  if ($[3] !== props || $[4] !== variant) {
+    t2 = _jsx(AppText, {
+      accessibilityRole: "header",
+      variant: variant,
+      ...props
+    });
+    $[3] = props;
+    $[4] = variant;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
 };
 export default Heading;