@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Display/Display.AvatarGroup.js

@@ -1,23 +1,138 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Avatar from "./Display.Avatar.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function AvatarGroup({ items, max = 4, size = 36, className, testID }) {
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function AvatarGroup(t0) {
+  const $ = _c(32);
+  const {
+    items,
+    max: t1,
+    size: t2,
+    className,
+    testID
+  } = t0;
+  const max = t1 === undefined ? 4 : t1;
+  const size = t2 === undefined ? 36 : t2;
+  const theme = useTheme();
+  let T0;
+  let overflow;
+  let overlap;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  if ($[0] !== className || $[1] !== items || $[2] !== max || $[3] !== size || $[4] !== testID || $[5] !== theme) {
     const visible = items.slice(0, max);
-    const overflow = items.length - visible.length;
-    const overlap = Math.round(size / 3);
-    return (_jsxs(View, { className: className, style: { flexDirection: "row" }, testID: testID, children: [visible.map((item, index) => (_jsx(View, { style: {
-                    marginLeft: index === 0 ? 0 : -overlap,
-                    borderRadius: size,
-                    borderWidth: 2,
-                    borderColor: theme.bg.card,
-                }, children: _jsx(Avatar, { initials: item.initials, size: size }) }, `${item.initials}-${index}`))), overflow > 0 ? (_jsx(View, { className: "items-center justify-center rounded-full bg-bg-muted", style: {
-                    width: size,
-                    height: size,
-                    marginLeft: -overlap,
-                    borderWidth: 2,
-                    borderColor: theme.bg.card,
-                }, children: _jsxs(Typography.Text, { className: "text-text-secondary font-semibold text-xs", children: ["+", overflow] }) })) : null] }));
+    overflow = items.length - visible.length;
+    let t7;
+    if ($[13] !== size) {
+      t7 = Math.round(size / 3);
+      $[13] = size;
+      $[14] = t7;
+    } else {
+      t7 = $[14];
+    }
+    overlap = t7;
+    T0 = View;
+    t3 = className;
+    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = {
+        flexDirection: "row"
+      };
+      $[15] = t4;
+    } else {
+      t4 = $[15];
+    }
+    t5 = testID;
+    let t8;
+    if ($[16] !== overlap || $[17] !== size || $[18] !== theme) {
+      t8 = (item, index) => _jsx(View, {
+        style: {
+          marginLeft: index === 0 ? 0 : -overlap,
+          borderRadius: size,
+          borderWidth: 2,
+          borderColor: theme.bg.card
+        },
+        children: _jsx(Avatar, {
+          initials: item.initials,
+          size: size
+        })
+      }, `${item.initials}-${index}`);
+      $[16] = overlap;
+      $[17] = size;
+      $[18] = theme;
+      $[19] = t8;
+    } else {
+      t8 = $[19];
+    }
+    t6 = visible.map(t8);
+    $[0] = className;
+    $[1] = items;
+    $[2] = max;
+    $[3] = size;
+    $[4] = testID;
+    $[5] = theme;
+    $[6] = T0;
+    $[7] = overflow;
+    $[8] = overlap;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    T0 = $[6];
+    overflow = $[7];
+    overlap = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    t5 = $[11];
+    t6 = $[12];
+  }
+  let t7;
+  if ($[20] !== overflow || $[21] !== overlap || $[22] !== size || $[23] !== theme) {
+    t7 = overflow > 0 ? _jsx(View, {
+      className: "items-center justify-center rounded-full bg-bg-muted",
+      style: {
+        width: size,
+        height: size,
+        marginLeft: -overlap,
+        borderWidth: 2,
+        borderColor: theme.bg.card
+      },
+      children: _jsxs(Typography.Text, {
+        className: "text-text-secondary",
+        semibold: true,
+        children: ["+", overflow]
+      })
+    }) : null;
+    $[20] = overflow;
+    $[21] = overlap;
+    $[22] = size;
+    $[23] = theme;
+    $[24] = t7;
+  } else {
+    t7 = $[24];
+  }
+  let t8;
+  if ($[25] !== T0 || $[26] !== t3 || $[27] !== t4 || $[28] !== t5 || $[29] !== t6 || $[30] !== t7) {
+    t8 = _jsxs(T0, {
+      className: t3,
+      style: t4,
+      testID: t5,
+      children: [t6, t7]
+    });
+    $[25] = T0;
+    $[26] = t3;
+    $[27] = t4;
+    $[28] = t5;
+    $[29] = t6;
+    $[30] = t7;
+    $[31] = t8;
+  } else {
+    t8 = $[31];
+  }
+  return t8;
 }
 export default AvatarGroup;

package/dist/Display/Display.Badge.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "../theme/tw.js";
+import type { typographyVariants } from "../theme/typography.js";
 declare const badge: import("tailwind-variants").TVReturnType<{
     variant: {
         info: {
@@ -25,6 +26,10 @@ declare const badge: import("tailwind-variants").TVReturnType<{
             root: string;
             text: string;
         };
+        accent: {
+            root: string;
+            text: string;
+        };
     };
 }, {
     root: string;
@@ -55,6 +60,10 @@ declare const badge: import("tailwind-variants").TVReturnType<{
             root: string;
             text: string;
         };
+        accent: {
+            root: string;
+            text: string;
+        };
     };
 }, {
     root: string;
@@ -85,6 +94,10 @@ declare const badge: import("tailwind-variants").TVReturnType<{
             root: string;
             text: string;
         };
+        accent: {
+            root: string;
+            text: string;
+        };
     };
 }, {
     root: string;
@@ -97,12 +110,15 @@ export declare enum BadgeVariants {
     SUCCESS = "success",
     INFO_DARK = "infoDark",
     DANGER = "danger",
-    SUCCESS_DARK = "successDark"
+    SUCCESS_DARK = "successDark",
+    ACCENT = "accent"
 }
 export type BadgeProps = {
     label: string;
     variant: BadgeVariants | BadgeVariant | string;
     className?: string;
+    /** Typography variant of the label. Defaults to the shared pill metrics (12/16). */
+    textVariant?: keyof typeof typographyVariants;
 };
-declare function Badge({ label, variant, className }: BadgeProps): import("react").JSX.Element;
+declare function Badge({ label, variant, className, textVariant }: BadgeProps): import("react").JSX.Element;
 export default Badge;

package/dist/Display/Display.Badge.js

@@ -1,54 +1,122 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { PillLabel } from "./pill.js";
 import { tv } from "../theme/tw.js";
-import { Text, View } from "react-native";
+import { View } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 const badge = tv({
-    slots: {
-        root: "px-2.5 py-1.5 rounded-lg self-start",
-        text: "text-xs font-semibold",
-    },
-    variants: {
-        variant: {
-            info: {
-                root: "bg-container-info",
-                text: "text-info",
-            },
-            infoDark: {
-                root: "bg-info",
-                text: "text-text-on-primary",
-            },
-            warning: {
-                root: "bg-container-warning",
-                text: "text-warning",
-            },
-            success: {
-                root: "bg-container-success",
-                text: "text-success",
-            },
-            successDark: {
-                root: "bg-success",
-                text: "text-text-on-primary",
-            },
-            danger: {
-                root: "bg-container-danger",
-                text: "text-danger",
-            },
-        },
-    },
-    defaultVariants: {
-        variant: "info",
-    },
+  slots: {
+    root: "px-2.5 py-1.5 rounded-lg self-start",
+    text: ""
+  },
+  variants: {
+    variant: {
+      info: {
+        root: "bg-container-info",
+        text: "text-info"
+      },
+      infoDark: {
+        root: "bg-info",
+        text: "text-text-on-primary"
+      },
+      warning: {
+        root: "bg-container-warning",
+        text: "text-warning"
+      },
+      success: {
+        root: "bg-container-success",
+        text: "text-success"
+      },
+      successDark: {
+        root: "bg-success",
+        text: "text-text-on-primary"
+      },
+      danger: {
+        root: "bg-container-danger",
+        text: "text-danger"
+      },
+      accent: {
+        root: "bg-accent",
+        text: "text-text-on-accent"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
 });
-export var BadgeVariants;
-(function (BadgeVariants) {
-    BadgeVariants["INFO"] = "info";
-    BadgeVariants["WARNING"] = "warning";
-    BadgeVariants["SUCCESS"] = "success";
-    BadgeVariants["INFO_DARK"] = "infoDark";
-    BadgeVariants["DANGER"] = "danger";
-    BadgeVariants["SUCCESS_DARK"] = "successDark";
-})(BadgeVariants || (BadgeVariants = {}));
-function Badge({ label, variant, className }) {
-    const styles = badge({ variant: variant });
-    return (_jsx(View, { className: styles.root({ className }), children: _jsx(Text, { className: styles.text(), numberOfLines: 1, children: label }) }));
+export let BadgeVariants = /*#__PURE__*/function (BadgeVariants) {
+  BadgeVariants["INFO"] = "info";
+  BadgeVariants["WARNING"] = "warning";
+  BadgeVariants["SUCCESS"] = "success";
+  BadgeVariants["INFO_DARK"] = "infoDark";
+  BadgeVariants["DANGER"] = "danger";
+  BadgeVariants["SUCCESS_DARK"] = "successDark";
+  BadgeVariants["ACCENT"] = "accent";
+  return BadgeVariants;
+}({});
+function Badge(t0) {
+  const $ = _c(15);
+  const {
+    label,
+    variant,
+    className,
+    textVariant
+  } = t0;
+  let T0;
+  let T1;
+  let t1;
+  let t2;
+  if ($[0] !== className || $[1] !== variant) {
+    const styles = badge({
+      variant: variant
+    });
+    T1 = View;
+    t2 = styles.root({
+      className
+    });
+    T0 = PillLabel;
+    t1 = styles.text();
+    $[0] = className;
+    $[1] = variant;
+    $[2] = T0;
+    $[3] = T1;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    T0 = $[2];
+    T1 = $[3];
+    t1 = $[4];
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== T0 || $[7] !== label || $[8] !== t1 || $[9] !== textVariant) {
+    t3 = _jsx(T0, {
+      className: t1,
+      semibold: true,
+      variant: textVariant,
+      children: label
+    });
+    $[6] = T0;
+    $[7] = label;
+    $[8] = t1;
+    $[9] = textVariant;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== T1 || $[12] !== t2 || $[13] !== t3) {
+    t4 = _jsx(T1, {
+      className: t2,
+      children: t3
+    });
+    $[11] = T1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
 }
 export default Badge;

package/dist/Display/Display.Card.js

@@ -1,39 +1,176 @@
-import { jsx as _jsx } 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 { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 const card = tv({
-    base: "bg-bg-card rounded-lg border border-border-light",
-    variants: {
-        padding: {
-            none: "p-0",
-            sm: "p-3",
-            md: "p-4",
-            lg: "p-6",
-        },
-    },
-    defaultVariants: {
-        padding: "md",
-    },
+  base: "bg-bg-card rounded-lg border border-border-light",
+  variants: {
+    padding: {
+      none: "p-0",
+      sm: "p-3",
+      md: "p-4",
+      lg: "p-6"
+    }
+  },
+  defaultVariants: {
+    padding: "md"
+  }
 });
-function Card({ padding = "md", elevation = "sm", onPress, className, children, testID, }) {
-    const theme = useTheme();
-    const shadow = elevation === "none"
-        ? { borderCurve: "continuous" }
-        : { ...theme.shadow[elevation], borderCurve: "continuous" };
-    if (onPress) {
-        return (_jsx(Pressable, { className: card({ padding, className }), onPress: onPress, style: shadow, testID: testID, children: children }));
+function Card(t0) {
+  const $ = _c(20);
+  const {
+    padding: t1,
+    elevation: t2,
+    onPress,
+    className,
+    children,
+    testID
+  } = t0;
+  const padding = t1 === undefined ? "md" : t1;
+  const elevation = t2 === undefined ? "sm" : t2;
+  const theme = useTheme();
+  let t3;
+  if ($[0] !== elevation || $[1] !== theme) {
+    t3 = elevation === "none" ? {
+      borderCurve: "continuous"
+    } : {
+      ...theme.shadow[elevation],
+      borderCurve: "continuous"
+    };
+    $[0] = elevation;
+    $[1] = theme;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const shadow = t3;
+  if (onPress) {
+    let t4;
+    if ($[3] !== className || $[4] !== padding) {
+      t4 = card({
+        padding,
+        className
+      });
+      $[3] = className;
+      $[4] = padding;
+      $[5] = t4;
+    } else {
+      t4 = $[5];
     }
-    return (_jsx(View, { className: card({ padding, className }), style: shadow, testID: testID, children: children }));
+    let t5;
+    if ($[6] !== children || $[7] !== onPress || $[8] !== shadow || $[9] !== t4 || $[10] !== testID) {
+      t5 = _jsx(Pressable, {
+        className: t4,
+        onPress: onPress,
+        style: shadow,
+        testID: testID,
+        children: children
+      });
+      $[6] = children;
+      $[7] = onPress;
+      $[8] = shadow;
+      $[9] = t4;
+      $[10] = testID;
+      $[11] = t5;
+    } else {
+      t5 = $[11];
+    }
+    return t5;
+  }
+  let t4;
+  if ($[12] !== className || $[13] !== padding) {
+    t4 = card({
+      padding,
+      className
+    });
+    $[12] = className;
+    $[13] = padding;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== children || $[16] !== shadow || $[17] !== t4 || $[18] !== testID) {
+    t5 = _jsx(View, {
+      className: t4,
+      style: shadow,
+      testID: testID,
+      children: children
+    });
+    $[15] = children;
+    $[16] = shadow;
+    $[17] = t4;
+    $[18] = testID;
+    $[19] = t5;
+  } else {
+    t5 = $[19];
+  }
+  return t5;
 }
-function CardTitle({ children, className }) {
-    return (_jsx(Typography.Text, { className: cn("text-text-primary mb-1", className), semibold: true, variant: "h4", children: children }));
+function CardTitle(t0) {
+  const $ = _c(5);
+  const {
+    children,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("text-text-primary mb-1", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== children || $[3] !== t1) {
+    t2 = _jsx(Typography.Text, {
+      className: t1,
+      semibold: true,
+      variant: "h4",
+      children: children
+    });
+    $[2] = children;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 }
-function CardFooter({ children, className }) {
-    return (_jsx(View, { className: cn("flex-row items-center justify-end gap-2 mt-3", className), children: children }));
+function CardFooter(t0) {
+  const $ = _c(5);
+  const {
+    children,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("flex-row items-center justify-end gap-2 mt-3", 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 CardWithSlots = Object.assign(Card, { Title: CardTitle, Footer: CardFooter });
+const CardWithSlots = Object.assign(Card, {
+  Title: CardTitle,
+  Footer: CardFooter
+});
 export default CardWithSlots;
 export { CardWithSlots as Card };