@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Display/count-badge.js

@@ -0,0 +1,124 @@
+import { c as _c } from "react/compiler-runtime";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { StyleSheet, View } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const styles = StyleSheet.create({
+  count: {
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    paddingHorizontal: 4,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    borderWidth: 2
+  },
+  // An absolute child is measured against its parent, often a 24-point icon, so
+  // "99+" wrapped and lost its "+". The anchor gives the badge room and no touches.
+  anchor: {
+    position: "absolute",
+    width: 64,
+    alignItems: "flex-end"
+  },
+  label: {
+    fontSize: 10,
+    lineHeight: 14,
+    includeFontPadding: false
+  }
+});
+export function countLabel(count, max) {
+  return typeof count === "number" && count > max ? `${max}+` : String(count);
+}
+
+/** The one notification count of the DS: icon badges, app bar actions, tabs and menu rows. */
+export function CountBadge(t0) {
+  const $ = _c(16);
+  const {
+    count,
+    max: t1,
+    dot: t2,
+    color,
+    ringColor,
+    anchor,
+    style
+  } = t0;
+  const max = t1 === undefined ? 99 : t1;
+  const dot = t2 === undefined ? false : t2;
+  const theme = useTheme();
+  const t3 = color ?? theme.danger;
+  const t4 = ringColor ?? theme.bg.card;
+  let t5;
+  if ($[0] !== t3 || $[1] !== t4) {
+    t5 = {
+      backgroundColor: t3,
+      borderColor: t4
+    };
+    $[0] = t3;
+    $[1] = t4;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  const fill = t5;
+  if (!dot && (count == null || count === "")) {
+    return null;
+  }
+  let t6;
+  if ($[3] !== color || $[4] !== count || $[5] !== dot || $[6] !== fill || $[7] !== max || $[8] !== style || $[9] !== theme) {
+    t6 = dot ? _jsx(View, {
+      style: [styles.dot, fill, style]
+    }) : _jsx(View, {
+      style: [styles.count, fill, style],
+      children: _jsx(Typography.Text, {
+        semibold: true,
+        style: [styles.label, {
+          color: color ? theme.text.inverse : theme.text.onDanger
+        }],
+        variant: "labelSmall",
+        children: countLabel(count ?? "", max)
+      })
+    });
+    $[3] = color;
+    $[4] = count;
+    $[5] = dot;
+    $[6] = fill;
+    $[7] = max;
+    $[8] = style;
+    $[9] = theme;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  const badge = t6;
+  if (!anchor) {
+    return badge;
+  }
+  let t7;
+  if ($[11] !== anchor) {
+    t7 = [styles.anchor, anchor];
+    $[11] = anchor;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== badge || $[14] !== t7) {
+    t8 = _jsx(View, {
+      pointerEvents: "none",
+      style: t7,
+      children: badge
+    });
+    $[13] = badge;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  return t8;
+}

package/dist/Display/group-title.d.ts

@@ -0,0 +1,10 @@
+import type { StyleProp, TextStyle } from "react-native";
+/**
+ * The title above a group of rows (`MenuSection`, `ListGroup`, `FormViewV2.Content.Group`,
+ * `QuickActions`): the uppercase caption of the settings screens in production. Uppercase
+ * comes from `transform`, so screen readers get the original text, announced as a header.
+ */
+export declare function GroupTitle({ children, style, }: {
+    children: string;
+    style?: StyleProp<TextStyle>;
+}): import("react").JSX.Element;

package/dist/Display/group-title.js

@@ -0,0 +1,53 @@
+import { c as _c } from "react/compiler-runtime";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+/**
+ * The title above a group of rows (`MenuSection`, `ListGroup`, `FormViewV2.Content.Group`,
+ * `QuickActions`): the uppercase caption of the settings screens in production. Uppercase
+ * comes from `transform`, so screen readers get the original text, announced as a header.
+ */
+export function GroupTitle(t0) {
+  const $ = _c(8);
+  const {
+    children,
+    style
+  } = t0;
+  const theme = useTheme();
+  let t1;
+  if ($[0] !== theme.text.secondary) {
+    t1 = {
+      color: theme.text.secondary
+    };
+    $[0] = theme.text.secondary;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== style || $[3] !== t1) {
+    t2 = [t1, style];
+    $[2] = style;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== children || $[6] !== t2) {
+    t3 = _jsx(Typography.Text, {
+      accessibilityRole: "header",
+      semibold: true,
+      style: t2,
+      transform: "uppercase",
+      variant: "caption",
+      children: children
+    });
+    $[5] = children;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}

package/dist/Display/icon-font.d.ts

@@ -0,0 +1,3 @@
+export declare const ICON_FONT_FAMILY = "MaterialSymbols_400Regular";
+/** Load once at startup with `useFonts(ICON_FONTS)`; Android and web draw icons from it. */
+export declare const ICON_FONTS: Record<string, number>;

package/dist/Display/icon-font.ios.d.ts

@@ -0,0 +1,3 @@
+export declare const ICON_FONT_FAMILY = "MaterialSymbols_400Regular";
+/** iOS draws SF Symbols natively; the Material font stays out of the iOS bundle. */
+export declare const ICON_FONTS: Record<string, number>;

package/dist/Display/icon-font.ios.js

@@ -0,0 +1,4 @@
+export const ICON_FONT_FAMILY = "MaterialSymbols_400Regular";
+
+/** iOS draws SF Symbols natively; the Material font stays out of the iOS bundle. */
+export const ICON_FONTS = {};

package/dist/Display/icon-font.js

@@ -0,0 +1,7 @@
+import { MaterialSymbols_400Regular } from "@expo-google-fonts/material-symbols/400Regular";
+export const ICON_FONT_FAMILY = "MaterialSymbols_400Regular";
+
+/** Load once at startup with `useFonts(ICON_FONTS)`; Android and web draw icons from it. */
+export const ICON_FONTS = {
+  [ICON_FONT_FAMILY]: MaterialSymbols_400Regular
+};

package/dist/Display/icon-glyphs.d.ts

@@ -0,0 +1,2 @@
+import type { BuiltInIconName } from "./icon-map.js";
+export declare const MATERIAL_CODEPOINTS: Readonly<Record<BuiltInIconName, number>>;

package/dist/Display/icon-glyphs.js

@@ -0,0 +1,87 @@
+// Generated by scripts/generate-icon-glyphs.mjs from expo-symbols' Material Symbols table.
+export const MATERIAL_CODEPOINTS = {
+  add: 0xe145,
+  "add-circle": 0xe147,
+  archive: 0xe149,
+  back: 0xe5c4,
+  bicycle: 0xe52f,
+  book: 0xe865,
+  bookmark: 0xe866,
+  "bookmark-empty": 0xe867,
+  calendar: 0xebcc,
+  camera: 0xe3b0,
+  card: 0xe870,
+  cart: 0xe8cc,
+  cash: 0xef63,
+  check: 0xe5ca,
+  circle: 0xe836,
+  close: 0xe5cd,
+  collapse: 0xe5ce,
+  copy: 0xe14d,
+  "dark-mode": 0xe51c,
+  database: 0xf20e,
+  delete: 0xe872,
+  dismiss: 0xe5c9,
+  document: 0xe873,
+  down: 0xe5db,
+  download: 0xf090,
+  "download-cloud": 0xe2c0,
+  edit: 0xe3c9,
+  empty: 0xe156,
+  error: 0xe000,
+  expand: 0xe5cf,
+  filter: 0xe429,
+  folder: 0xe2c7,
+  grid: 0xe9b0,
+  help: 0xe887,
+  hidden: 0xe8f5,
+  home: 0xe88a,
+  image: 0xe3f4,
+  inbox: 0xe156,
+  info: 0xe88e,
+  link: 0xe157,
+  list: 0xe896,
+  location: 0xe0c8,
+  "location-disabled": 0xe0c7,
+  lock: 0xe897,
+  logout: 0xe9ba,
+  mail: 0xe158,
+  map: 0xe55b,
+  menu: 0xe5d2,
+  more: 0xe5d3,
+  "more-vertical": 0xe5d4,
+  mute: 0xe04f,
+  next: 0xe5cc,
+  notifications: 0xe7f4,
+  package: 0xe1a1,
+  pause: 0xe034,
+  people: 0xe7ef,
+  play: 0xe037,
+  printer: 0xe8ad,
+  profile: 0xe7fd,
+  "profile-circle": 0xe853,
+  rating: 0xe838,
+  "rating-empty": 0xe83a,
+  receipt: 0xef6e,
+  remove: 0xe15b,
+  reorder: 0xe25d,
+  save: 0xe161,
+  search: 0xe8b6,
+  "search-empty": 0xea76,
+  server: 0xe875,
+  settings: 0xe8b8,
+  share: 0xe80d,
+  stop: 0xe769,
+  success: 0xe86c,
+  sync: 0xe627,
+  time: 0xe8b5,
+  unlink: 0xe16f,
+  up: 0xe5d8,
+  upload: 0xf09b,
+  "upload-cloud": 0xe2c3,
+  visibility: 0xe8f4,
+  volume: 0xe050,
+  wallet: 0xf8ff,
+  warning: 0xe002,
+  wifi: 0xe63e
+};

package/dist/Display/icon-map.d.ts

@@ -1,3 +1,4 @@
+import type { CustomIconName } from "./icon-registry.js";
 import type { AndroidSymbol, SFSymbol } from "expo-symbols";
 export type IconDefinition = Readonly<{
     sf: SFSymbol;
@@ -9,7 +10,7 @@ export declare const ICON_MAP: {
         readonly md: "add";
     };
     readonly "add-circle": {
-        readonly sf: "plus.circle.fill";
+        readonly sf: "plus.circle";
         readonly md: "add_circle";
     };
     readonly archive: {
@@ -89,7 +90,7 @@ export declare const ICON_MAP: {
         readonly md: "delete";
     };
     readonly dismiss: {
-        readonly sf: "xmark.circle.fill";
+        readonly sf: "xmark.circle";
         readonly md: "cancel";
     };
     readonly document: {
@@ -117,7 +118,7 @@ export declare const ICON_MAP: {
         readonly md: "inbox";
     };
     readonly error: {
-        readonly sf: "exclamationmark.circle.fill";
+        readonly sf: "exclamationmark.circle";
         readonly md: "error";
     };
     readonly expand: {
@@ -145,7 +146,7 @@ export declare const ICON_MAP: {
         readonly md: "visibility_off";
     };
     readonly home: {
-        readonly sf: "house.fill";
+        readonly sf: "house";
         readonly md: "home";
     };
     readonly image: {
@@ -157,7 +158,7 @@ export declare const ICON_MAP: {
         readonly md: "inbox";
     };
     readonly info: {
-        readonly sf: "info.circle.fill";
+        readonly sf: "info.circle";
         readonly md: "info";
     };
     readonly link: {
@@ -205,7 +206,7 @@ export declare const ICON_MAP: {
         readonly md: "more_vert";
     };
     readonly mute: {
-        readonly sf: "speaker.slash.fill";
+        readonly sf: "speaker.slash";
         readonly md: "volume_off";
     };
     readonly next: {
@@ -289,11 +290,11 @@ export declare const ICON_MAP: {
         readonly md: "share";
     };
     readonly stop: {
-        readonly sf: "hand.raised.fill";
+        readonly sf: "hand.raised";
         readonly md: "front_hand";
     };
     readonly success: {
-        readonly sf: "checkmark.circle.fill";
+        readonly sf: "checkmark.circle";
         readonly md: "check_circle";
     };
     readonly sync: {
@@ -325,7 +326,7 @@ export declare const ICON_MAP: {
         readonly md: "visibility";
     };
     readonly volume: {
-        readonly sf: "speaker.wave.2.fill";
+        readonly sf: "speaker.wave.2";
         readonly md: "volume_up";
     };
     readonly wallet: {
@@ -333,7 +334,7 @@ export declare const ICON_MAP: {
         readonly md: "wallet";
     };
     readonly warning: {
-        readonly sf: "exclamationmark.triangle.fill";
+        readonly sf: "exclamationmark.triangle";
         readonly md: "warning";
     };
     readonly wifi: {
@@ -341,4 +342,7 @@ export declare const ICON_MAP: {
         readonly md: "wifi";
     };
 };
-export type IconName = keyof typeof ICON_MAP;
+export type BuiltInIconName = keyof typeof ICON_MAP;
+/** Built-in semantic names plus the ones an app registers with `registerIcons`. */
+export type IconName = BuiltInIconName | CustomIconName;
+export declare const ICON_NAMES: readonly BuiltInIconName[];