@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Display/Display.Accordion.js

@@ -1,4 +1,4 @@
-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 Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
@@ -7,20 +7,192 @@ import { Typography } from "../Typography/index.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { useState } from "react";
 import { LayoutAnimation, View } from "react-native";
-function AccordionItem({ title, children, defaultOpen = false, className, testID, }) {
-    const [open, setOpen] = useState(defaultOpen);
-    const theme = useTheme();
-    const reducedMotion = useReducedMotion();
-    const toggle = () => {
-        if (!reducedMotion)
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-        setOpen((prev) => !prev);
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function AccordionItem(t0) {
+  const $ = _c(30);
+  const {
+    title,
+    children,
+    defaultOpen: t1,
+    className,
+    testID
+  } = t0;
+  const defaultOpen = t1 === undefined ? false : t1;
+  const [open, setOpen] = useState(defaultOpen);
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  let t2;
+  if ($[0] !== reducedMotion) {
+    t2 = () => {
+      if (!reducedMotion) {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      }
+      setOpen(_temp);
+    };
+    $[0] = reducedMotion;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const toggle = t2;
+  let t3;
+  if ($[2] !== className) {
+    t3 = cn("border-b border-border-default", className);
+    $[2] = className;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== open) {
+    t4 = {
+      expanded: open
     };
-    return (_jsxs(View, { className: cn("border-b border-border-default", className), testID: testID, children: [_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { expanded: open }, className: "flex-row items-center justify-between py-3", onPress: toggle, style: { minHeight: 48 }, children: [_jsx(Typography.Text, { className: "flex-1 text-text-primary", semibold: true, children: title }), _jsx(View, { style: { transform: [{ rotate: open ? "180deg" : "0deg" }] }, children: _jsx(Icon, { color: theme.icon.secondary, name: "expand", size: 18 }) })] }), open ? _jsx(View, { className: "pb-3", children: children }) : null] }));
+    $[4] = open;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      minHeight: 48
+    };
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== title) {
+    t6 = _jsx(Typography.Text, {
+      className: "flex-1 text-text-primary",
+      semibold: true,
+      children: title
+    });
+    $[7] = title;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  const t7 = open ? "180deg" : "0deg";
+  let t8;
+  if ($[9] !== t7) {
+    t8 = {
+      transform: [{
+        rotate: t7
+      }]
+    };
+    $[9] = t7;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== theme.icon.secondary) {
+    t9 = _jsx(Icon, {
+      color: theme.icon.secondary,
+      name: "expand",
+      size: 18
+    });
+    $[11] = theme.icon.secondary;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== t8 || $[14] !== t9) {
+    t10 = _jsx(View, {
+      style: t8,
+      children: t9
+    });
+    $[13] = t8;
+    $[14] = t9;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  let t11;
+  if ($[16] !== t10 || $[17] !== t4 || $[18] !== t6 || $[19] !== title || $[20] !== toggle) {
+    t11 = _jsxs(Pressable, {
+      accessibilityLabel: title,
+      accessibilityRole: "button",
+      accessibilityState: t4,
+      className: "flex-row items-center justify-between py-3",
+      onPress: toggle,
+      style: t5,
+      children: [t6, t10]
+    });
+    $[16] = t10;
+    $[17] = t4;
+    $[18] = t6;
+    $[19] = title;
+    $[20] = toggle;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  let t12;
+  if ($[22] !== children || $[23] !== open) {
+    t12 = open ? _jsx(View, {
+      className: "pb-3",
+      children: children
+    }) : null;
+    $[22] = children;
+    $[23] = open;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
+  if ($[25] !== t11 || $[26] !== t12 || $[27] !== t3 || $[28] !== testID) {
+    t13 = _jsxs(View, {
+      className: t3,
+      testID: testID,
+      children: [t11, t12]
+    });
+    $[25] = t11;
+    $[26] = t12;
+    $[27] = t3;
+    $[28] = testID;
+    $[29] = t13;
+  } else {
+    t13 = $[29];
+  }
+  return t13;
+}
+function _temp(prev) {
+  return !prev;
 }
-function AccordionRoot({ children, className }) {
-    return _jsx(View, { className: cn("bg-bg-card rounded-lg", className), children: children });
+function AccordionRoot(t0) {
+  const $ = _c(5);
+  const {
+    children,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("bg-bg-card rounded-lg", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== children || $[3] !== t1) {
+    t2 = _jsx(View, {
+      className: t1,
+      children: children
+    });
+    $[2] = children;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 }
-const Accordion = Object.assign(AccordionRoot, { Item: AccordionItem });
+const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem
+});
 export default Accordion;
 export { Accordion };

package/dist/Display/Display.AmountSummary.js

@@ -1,25 +1,216 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { View } from "react-native";
 import Monetary from "./Display.Monetary";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 const AmountSummaryContext = createContext(undefined);
-function Root({ children, currencySymbol, variant = "card", className, testID, }) {
-    return (_jsx(AmountSummaryContext.Provider, { value: { currencySymbol }, children: _jsx(View, { className: cn("gap-1", variant === "card"
-                ? "rounded-xl border border-border-light bg-bg-card px-4 py-2"
-                : "", className), testID: testID, children: children }) }));
+function Root(t0) {
+  const $ = _c(12);
+  const {
+    children,
+    currencySymbol,
+    variant: t1,
+    className,
+    testID
+  } = t0;
+  const variant = t1 === undefined ? "card" : t1;
+  let t2;
+  if ($[0] !== currencySymbol) {
+    t2 = {
+      currencySymbol
+    };
+    $[0] = currencySymbol;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const context = t2;
+  const t3 = variant === "card" ? "rounded-xl border border-border-light bg-bg-card px-4 py-2" : "";
+  let t4;
+  if ($[2] !== className || $[3] !== t3) {
+    t4 = cn("gap-1", t3, className);
+    $[2] = className;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== children || $[6] !== t4 || $[7] !== testID) {
+    t5 = _jsx(View, {
+      className: t4,
+      testID: testID,
+      children: children
+    });
+    $[5] = children;
+    $[6] = t4;
+    $[7] = testID;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== context || $[10] !== t5) {
+    t6 = _jsx(AmountSummaryContext.Provider, {
+      value: context,
+      children: t5
+    });
+    $[9] = context;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  return t6;
 }
-function Row({ label, value, currencySymbol, prefix, className, labelClassName, valueClassName, testID, }) {
-    const context = useContext(AmountSummaryContext);
-    const resolvedCurrencySymbol = currencySymbol ?? context?.currencySymbol;
-    if (resolvedCurrencySymbol === undefined) {
-        throw new Error("AmountSummary.Row requires a currencySymbol or an AmountSummary.Root.");
-    }
-    return (_jsxs(View, { className: cn("flex-row items-center justify-between gap-3 py-1", className), testID: testID, children: [_jsx(Typography.Text, { className: cn("flex-1 text-text-secondary", labelClassName), children: label }), _jsx(Monetary, { className: cn("text-text-primary", valueClassName), currencySymbol: resolvedCurrencySymbol, prefix: prefix, semibold: true, textVariant: "body", value: value })] }));
+function Row(t0) {
+  const $ = _c(19);
+  const {
+    label,
+    value,
+    currencySymbol,
+    prefix,
+    className,
+    labelClassName,
+    valueClassName,
+    testID
+  } = t0;
+  const context = useContext(AmountSummaryContext);
+  const resolvedCurrencySymbol = currencySymbol ?? context?.currencySymbol;
+  if (resolvedCurrencySymbol === undefined) {
+    throw new Error("AmountSummary.Row requires a currencySymbol or an AmountSummary.Root.");
+  }
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("flex-row items-center justify-between gap-3 py-1", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== labelClassName) {
+    t2 = cn("flex-1 text-text-secondary", labelClassName);
+    $[2] = labelClassName;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== label || $[5] !== t2) {
+    t3 = _jsx(Typography.Text, {
+      className: t2,
+      children: label
+    });
+    $[4] = label;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== valueClassName) {
+    t4 = cn("text-text-primary", valueClassName);
+    $[7] = valueClassName;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== prefix || $[10] !== resolvedCurrencySymbol || $[11] !== t4 || $[12] !== value) {
+    t5 = _jsx(Monetary, {
+      className: t4,
+      currencySymbol: resolvedCurrencySymbol,
+      prefix: prefix,
+      semibold: true,
+      textVariant: "body",
+      value: value
+    });
+    $[9] = prefix;
+    $[10] = resolvedCurrencySymbol;
+    $[11] = t4;
+    $[12] = value;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== t1 || $[15] !== t3 || $[16] !== t5 || $[17] !== testID) {
+    t6 = _jsxs(View, {
+      className: t1,
+      testID: testID,
+      children: [t3, t5]
+    });
+    $[14] = t1;
+    $[15] = t3;
+    $[16] = t5;
+    $[17] = testID;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  return t6;
 }
 function Total(props) {
-    return (_jsxs(_Fragment, { children: [_jsx(View, { className: "my-1 border-t border-border-light" }), _jsx(Row, { ...props, className: cn("py-2", props.className), labelClassName: cn("text-text-primary font-semibold", props.labelClassName), valueClassName: cn("text-text-primary", props.valueClassName) })] }));
+  const $ = _c(12);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = _jsx(View, {
+      className: "my-1 border-t border-border-light"
+    });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props.className) {
+    t1 = cn("py-2", props.className);
+    $[1] = props.className;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== props.labelClassName) {
+    t2 = cn("text-text-primary font-semibold", props.labelClassName);
+    $[3] = props.labelClassName;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== props.valueClassName) {
+    t3 = cn("text-text-primary", props.valueClassName);
+    $[5] = props.valueClassName;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== props || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+    t4 = _jsxs(_Fragment, {
+      children: [t0, _jsx(Row, {
+        ...props,
+        className: t1,
+        labelClassName: t2,
+        valueClassName: t3
+      })]
+    });
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
 }
-const AmountSummary = { Root, Row, Total };
+const AmountSummary = {
+  Root,
+  Row,
+  Total
+};
 export default AmountSummary;

package/dist/Display/Display.Avatar.js

@@ -1,40 +1,102 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn, tv } from "../theme/tw.js";
+import { fontSizes } from "../theme/typography.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 const avatar = tv({
-    base: "justify-center items-center rounded-full shadow-sm",
-    variants: {
-        size: {
-            small: "w-8 h-8",
-            medium: "w-10 h-10",
-            large: "w-12 h-12",
-            xlarge: "w-16 h-16",
-        },
-        colorScheme: {
-            default: "bg-bg-hover",
-            primary: "bg-primary/20",
-            secondary: "bg-secondary/20",
-            success: "bg-container-success",
-            warning: "bg-container-warning",
-        },
-    },
-    defaultVariants: {
-        size: "medium",
-        colorScheme: "default",
+  base: "justify-center items-center rounded-full shadow-sm",
+  variants: {
+    size: {
+      small: "w-8 h-8",
+      medium: "w-10 h-10",
+      large: "w-12 h-12",
+      xlarge: "w-16 h-16"
     },
+    colorScheme: {
+      default: "bg-bg-hover",
+      primary: "bg-primary/20",
+      secondary: "bg-secondary/20",
+      success: "bg-container-success",
+      warning: "bg-container-warning"
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    colorScheme: "default"
+  }
 });
-const Avatar = ({ initials, size, colorScheme = "default", className }) => {
-    // Map size prop to Tailwind text classes
-    const getTextSize = () => {
-        if (size && size <= 32)
-            return "text-xs";
-        if (size && size <= 40)
-            return "text-sm";
-        if (size && size <= 48)
-            return "text-base";
-        return "text-lg";
+const Avatar = t0 => {
+  const $ = _c(14);
+  const {
+    initials,
+    size,
+    colorScheme: t1,
+    className
+  } = t0;
+  const colorScheme = t1 === undefined ? "default" : t1;
+  const initialsSize = size && size <= 32 ? fontSizes.xs : size && size <= 40 ? fontSizes.sm : size && size <= 48 ? fontSizes.base : fontSizes.lg;
+  let t2;
+  if ($[0] !== className || $[1] !== colorScheme) {
+    t2 = cn(avatar({
+      colorScheme
+    }), className);
+    $[0] = className;
+    $[1] = colorScheme;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== size) {
+    t3 = size ? {
+      width: size,
+      height: size
+    } : undefined;
+    $[3] = size;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== initialsSize) {
+    t4 = {
+      fontSize: initialsSize
     };
-    return (_jsx(View, { className: cn(avatar({ colorScheme }), className), style: size ? { width: size, height: size } : undefined, children: _jsx(Typography.Text, { className: cn("text-text-primary font-semibold", getTextSize()), variant: "body", children: initials }) }));
+    $[5] = initialsSize;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== initials || $[8] !== t4) {
+    t5 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      semibold: true,
+      style: t4,
+      variant: "body",
+      children: initials
+    });
+    $[7] = initials;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== t2 || $[11] !== t3 || $[12] !== t5) {
+    t6 = _jsx(View, {
+      className: t2,
+      style: t3,
+      children: t5
+    });
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  return t6;
 };
 export default Avatar;