@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Display/icon-map.js

@@ -1,86 +1,346 @@
+// Android and web draw from Material Symbols 400, an outline-only font. SF Symbols use the
+// outline variant too, so an icon looks the same on both platforms. Only glyphs that are
+// solid in Material as well (play, pause) or whose fill is the meaning against an empty pair
+// (rating / rating-empty, bookmark / bookmark-empty) use `.fill`.
 export const ICON_MAP = {
-    add: { sf: "plus", md: "add" },
-    "add-circle": { sf: "plus.circle.fill", md: "add_circle" },
-    archive: { sf: "archivebox", md: "archive" },
-    back: { sf: "chevron.left", md: "arrow_back" },
-    bicycle: { sf: "bicycle", md: "directions_bike" },
-    book: { sf: "book", md: "book" },
-    bookmark: { sf: "bookmark.fill", md: "bookmark" },
-    "bookmark-empty": { sf: "bookmark", md: "bookmark_border" },
-    calendar: { sf: "calendar", md: "calendar_month" },
-    camera: { sf: "camera", md: "camera_alt" },
-    card: { sf: "creditcard", md: "credit_card" },
-    cart: { sf: "cart", md: "shopping_cart" },
-    cash: { sf: "banknote", md: "payments" },
-    check: { sf: "checkmark", md: "check" },
-    circle: { sf: "circle", md: "radio_button_unchecked" },
-    close: { sf: "xmark", md: "close" },
-    collapse: { sf: "chevron.up", md: "expand_less" },
-    copy: { sf: "doc.on.doc", md: "content_copy" },
-    "dark-mode": { sf: "moon", md: "dark_mode" },
-    database: { sf: "externaldrive", md: "database" },
-    delete: { sf: "trash", md: "delete" },
-    dismiss: { sf: "xmark.circle.fill", md: "cancel" },
-    document: { sf: "doc.text", md: "description" },
-    down: { sf: "arrow.down", md: "arrow_downward" },
-    download: { sf: "arrow.down.to.line", md: "download" },
-    "download-cloud": { sf: "icloud.and.arrow.down", md: "cloud_download" },
-    edit: { sf: "pencil", md: "edit" },
-    empty: { sf: "tray", md: "inbox" },
-    error: { sf: "exclamationmark.circle.fill", md: "error" },
-    expand: { sf: "chevron.down", md: "expand_more" },
-    filter: { sf: "slider.horizontal.3", md: "tune" },
-    folder: { sf: "folder", md: "folder" },
-    grid: { sf: "square.grid.2x2", md: "grid_view" },
-    help: { sf: "questionmark.circle", md: "help" },
-    hidden: { sf: "eye.slash", md: "visibility_off" },
-    home: { sf: "house.fill", md: "home" },
-    image: { sf: "photo", md: "image" },
-    inbox: { sf: "tray", md: "inbox" },
-    info: { sf: "info.circle.fill", md: "info" },
-    link: { sf: "link", md: "link" },
-    list: { sf: "list.bullet", md: "list" },
-    location: { sf: "mappin", md: "location_on" },
-    "location-disabled": { sf: "location.slash", md: "location_off" },
-    lock: { sf: "lock", md: "lock" },
-    logout: { sf: "rectangle.portrait.and.arrow.right", md: "logout" },
-    mail: { sf: "envelope", md: "mail" },
-    map: { sf: "map", md: "map" },
-    menu: { sf: "line.3.horizontal", md: "menu" },
-    more: { sf: "ellipsis", md: "more_horiz" },
-    "more-vertical": { sf: "ellipsis", md: "more_vert" },
-    mute: { sf: "speaker.slash.fill", md: "volume_off" },
-    next: { sf: "chevron.right", md: "chevron_right" },
-    notifications: { sf: "bell", md: "notifications" },
-    package: { sf: "shippingbox", md: "inventory_2" },
-    pause: { sf: "pause.fill", md: "pause" },
-    people: { sf: "person.2", md: "group" },
-    play: { sf: "play.fill", md: "play_arrow" },
-    printer: { sf: "printer", md: "print" },
-    profile: { sf: "person", md: "person" },
-    "profile-circle": { sf: "person.crop.circle", md: "account_circle" },
-    rating: { sf: "star.fill", md: "star" },
-    "rating-empty": { sf: "star", md: "star_border" },
-    receipt: { sf: "receipt", md: "receipt_long" },
-    remove: { sf: "minus", md: "remove" },
-    reorder: { sf: "line.3.horizontal", md: "drag_handle" },
-    save: { sf: "square.and.arrow.down", md: "save" },
-    search: { sf: "magnifyingglass", md: "search" },
-    "search-empty": { sf: "doc.text.magnifyingglass", md: "search_off" },
-    server: { sf: "server.rack", md: "dns" },
-    settings: { sf: "gearshape", md: "settings" },
-    share: { sf: "square.and.arrow.up", md: "share" },
-    stop: { sf: "hand.raised.fill", md: "front_hand" },
-    success: { sf: "checkmark.circle.fill", md: "check_circle" },
-    sync: { sf: "arrow.triangle.2.circlepath", md: "sync" },
-    time: { sf: "clock", md: "schedule" },
-    unlink: { sf: "link", md: "link_off" },
-    up: { sf: "arrow.up", md: "arrow_upward" },
-    upload: { sf: "arrow.up.to.line", md: "upload" },
-    "upload-cloud": { sf: "icloud.and.arrow.up", md: "cloud_upload" },
-    visibility: { sf: "eye", md: "visibility" },
-    volume: { sf: "speaker.wave.2.fill", md: "volume_up" },
-    wallet: { sf: "wallet.bifold", md: "wallet" },
-    warning: { sf: "exclamationmark.triangle.fill", md: "warning" },
-    wifi: { sf: "wifi", md: "wifi" },
+  add: {
+    sf: "plus",
+    md: "add"
+  },
+  "add-circle": {
+    sf: "plus.circle",
+    md: "add_circle"
+  },
+  archive: {
+    sf: "archivebox",
+    md: "archive"
+  },
+  back: {
+    sf: "chevron.left",
+    md: "arrow_back"
+  },
+  bicycle: {
+    sf: "bicycle",
+    md: "directions_bike"
+  },
+  book: {
+    sf: "book",
+    md: "book"
+  },
+  bookmark: {
+    sf: "bookmark.fill",
+    md: "bookmark"
+  },
+  "bookmark-empty": {
+    sf: "bookmark",
+    md: "bookmark_border"
+  },
+  calendar: {
+    sf: "calendar",
+    md: "calendar_month"
+  },
+  camera: {
+    sf: "camera",
+    md: "camera_alt"
+  },
+  card: {
+    sf: "creditcard",
+    md: "credit_card"
+  },
+  cart: {
+    sf: "cart",
+    md: "shopping_cart"
+  },
+  cash: {
+    sf: "banknote",
+    md: "payments"
+  },
+  check: {
+    sf: "checkmark",
+    md: "check"
+  },
+  circle: {
+    sf: "circle",
+    md: "radio_button_unchecked"
+  },
+  close: {
+    sf: "xmark",
+    md: "close"
+  },
+  collapse: {
+    sf: "chevron.up",
+    md: "expand_less"
+  },
+  copy: {
+    sf: "doc.on.doc",
+    md: "content_copy"
+  },
+  "dark-mode": {
+    sf: "moon",
+    md: "dark_mode"
+  },
+  database: {
+    sf: "externaldrive",
+    md: "database"
+  },
+  delete: {
+    sf: "trash",
+    md: "delete"
+  },
+  dismiss: {
+    sf: "xmark.circle",
+    md: "cancel"
+  },
+  document: {
+    sf: "doc.text",
+    md: "description"
+  },
+  down: {
+    sf: "arrow.down",
+    md: "arrow_downward"
+  },
+  download: {
+    sf: "arrow.down.to.line",
+    md: "download"
+  },
+  "download-cloud": {
+    sf: "icloud.and.arrow.down",
+    md: "cloud_download"
+  },
+  edit: {
+    sf: "pencil",
+    md: "edit"
+  },
+  empty: {
+    sf: "tray",
+    md: "inbox"
+  },
+  error: {
+    sf: "exclamationmark.circle",
+    md: "error"
+  },
+  expand: {
+    sf: "chevron.down",
+    md: "expand_more"
+  },
+  filter: {
+    sf: "slider.horizontal.3",
+    md: "tune"
+  },
+  folder: {
+    sf: "folder",
+    md: "folder"
+  },
+  grid: {
+    sf: "square.grid.2x2",
+    md: "grid_view"
+  },
+  help: {
+    sf: "questionmark.circle",
+    md: "help"
+  },
+  hidden: {
+    sf: "eye.slash",
+    md: "visibility_off"
+  },
+  home: {
+    sf: "house",
+    md: "home"
+  },
+  image: {
+    sf: "photo",
+    md: "image"
+  },
+  inbox: {
+    sf: "tray",
+    md: "inbox"
+  },
+  info: {
+    sf: "info.circle",
+    md: "info"
+  },
+  link: {
+    sf: "link",
+    md: "link"
+  },
+  list: {
+    sf: "list.bullet",
+    md: "list"
+  },
+  location: {
+    sf: "mappin",
+    md: "location_on"
+  },
+  "location-disabled": {
+    sf: "location.slash",
+    md: "location_off"
+  },
+  lock: {
+    sf: "lock",
+    md: "lock"
+  },
+  logout: {
+    sf: "rectangle.portrait.and.arrow.right",
+    md: "logout"
+  },
+  mail: {
+    sf: "envelope",
+    md: "mail"
+  },
+  map: {
+    sf: "map",
+    md: "map"
+  },
+  menu: {
+    sf: "line.3.horizontal",
+    md: "menu"
+  },
+  more: {
+    sf: "ellipsis",
+    md: "more_horiz"
+  },
+  "more-vertical": {
+    sf: "ellipsis",
+    md: "more_vert"
+  },
+  mute: {
+    sf: "speaker.slash",
+    md: "volume_off"
+  },
+  next: {
+    sf: "chevron.right",
+    md: "chevron_right"
+  },
+  notifications: {
+    sf: "bell",
+    md: "notifications"
+  },
+  package: {
+    sf: "shippingbox",
+    md: "inventory_2"
+  },
+  pause: {
+    sf: "pause.fill",
+    md: "pause"
+  },
+  people: {
+    sf: "person.2",
+    md: "group"
+  },
+  play: {
+    sf: "play.fill",
+    md: "play_arrow"
+  },
+  printer: {
+    sf: "printer",
+    md: "print"
+  },
+  profile: {
+    sf: "person",
+    md: "person"
+  },
+  "profile-circle": {
+    sf: "person.crop.circle",
+    md: "account_circle"
+  },
+  rating: {
+    sf: "star.fill",
+    md: "star"
+  },
+  "rating-empty": {
+    sf: "star",
+    md: "star_border"
+  },
+  receipt: {
+    sf: "receipt",
+    md: "receipt_long"
+  },
+  remove: {
+    sf: "minus",
+    md: "remove"
+  },
+  reorder: {
+    sf: "line.3.horizontal",
+    md: "drag_handle"
+  },
+  save: {
+    sf: "square.and.arrow.down",
+    md: "save"
+  },
+  search: {
+    sf: "magnifyingglass",
+    md: "search"
+  },
+  "search-empty": {
+    sf: "doc.text.magnifyingglass",
+    md: "search_off"
+  },
+  server: {
+    sf: "server.rack",
+    md: "dns"
+  },
+  settings: {
+    sf: "gearshape",
+    md: "settings"
+  },
+  share: {
+    sf: "square.and.arrow.up",
+    md: "share"
+  },
+  stop: {
+    sf: "hand.raised",
+    md: "front_hand"
+  },
+  success: {
+    sf: "checkmark.circle",
+    md: "check_circle"
+  },
+  sync: {
+    sf: "arrow.triangle.2.circlepath",
+    md: "sync"
+  },
+  time: {
+    sf: "clock",
+    md: "schedule"
+  },
+  unlink: {
+    sf: "link",
+    md: "link_off"
+  },
+  up: {
+    sf: "arrow.up",
+    md: "arrow_upward"
+  },
+  upload: {
+    sf: "arrow.up.to.line",
+    md: "upload"
+  },
+  "upload-cloud": {
+    sf: "icloud.and.arrow.up",
+    md: "cloud_upload"
+  },
+  visibility: {
+    sf: "eye",
+    md: "visibility"
+  },
+  volume: {
+    sf: "speaker.wave.2",
+    md: "volume_up"
+  },
+  wallet: {
+    sf: "wallet.bifold",
+    md: "wallet"
+  },
+  warning: {
+    sf: "exclamationmark.triangle",
+    md: "warning"
+  },
+  wifi: {
+    sf: "wifi",
+    md: "wifi"
+  }
 };
+
+/** Built-in semantic names plus the ones an app registers with `registerIcons`. */
+
+export const ICON_NAMES = Object.keys(ICON_MAP);

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { ColorValue } from "react-native";
+/**
+ * Apps add their own icons (brand SVGs, product glyphs) by name:
+ *
+ *   declare module "./icon-registry.js" {
+ *     interface CustomIconRegistry { odoo: true }
+ *   }
+ *   registerIcons({ odoo: ({ size, color }) => <OdooLogo color={color} size={size} /> });
+ *
+ * Then `<Display.Icon name="odoo" />` works like any built-in icon.
+ */
+export interface CustomIconRegistry {
+}
+export type CustomIconName = Extract<keyof CustomIconRegistry, string>;
+export type CustomIconRenderer = (props: {
+    size: number;
+    color: ColorValue;
+}) => ReactNode;
+export declare function registerIcons(icons: Partial<Record<CustomIconName, CustomIconRenderer>>): void;
+export declare function customIconRenderer(name: string): CustomIconRenderer | undefined;

package/dist/Display/icon-registry.js

@@ -0,0 +1,21 @@
+/**
+ * Apps add their own icons (brand SVGs, product glyphs) by name:
+ *
+ *   declare module "./icon-registry.js" {
+ *     interface CustomIconRegistry { odoo: true }
+ *   }
+ *   registerIcons({ odoo: ({ size, color }) => <OdooLogo color={color} size={size} /> });
+ *
+ * Then `<Display.Icon name="odoo" />` works like any built-in icon.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+
+const renderers = new Map();
+export function registerIcons(icons) {
+  for (const [name, renderer] of Object.entries(icons)) {
+    if (renderer) renderers.set(name, renderer);
+  }
+}
+export function customIconRenderer(name) {
+  return renderers.get(name);
+}

package/dist/Display/index.d.ts

@@ -29,6 +29,7 @@ import SearchHistory from "./Display.SearchHistory.js";
 import SectionHeader from "./Display.SectionHeader.js";
 import Stat from "./Display.Stat.js";
 import StatCard from "./Display.StatCard.js";
+import StatusBadge from "./Display.StatusBadge.js";
 import StatusDot from "./Display.StatusDot.js";
 import Story from "./Display.Story.js";
 import StoryTray from "./Display.StoryTray.js";
@@ -38,6 +39,7 @@ import Tag from "./Display.Tag.js";
 import Timeline from "./Display.Timeline.js";
 import Tooltip from "./Display.Tooltip.js";
 export declare const Display: {
+    StatusBadge: typeof StatusBadge;
     AmountSummary: {
         Root: ({ children, currencySymbol, variant, className, testID, }: import("./Display.AmountSummary.js").AmountSummaryRootProps) => import("react").JSX.Element;
         Row: ({ label, value, currencySymbol, prefix, className, labelClassName, valueClassName, testID, }: import("./Display.AmountSummary.js").AmountSummaryRowProps) => import("react").JSX.Element;
@@ -112,5 +114,8 @@ export type { ListGroupProps } from "./Display.ListGroup.js";
 export type { ListItemProps } from "./Display.ListItem.js";
 export type { MenuCardProps } from "./Display.MenuCard.js";
 export type { MenuGridItem } from "./Display.MenuGrid.js";
-export { ICON_MAP, type IconDefinition, type IconName, } from "./icon-map.js";
+export { defineStatuses, resolveStatus, type StatusBadgeProps, type StatusDefinition, type StatusMap, type StatusTone, } from "./Display.StatusBadge.js";
+export { ICON_FONT_FAMILY, ICON_FONTS } from "./icon-font.js";
+export { type BuiltInIconName, ICON_NAMES, type IconName, } from "./icon-map.js";
+export { type CustomIconRegistry, type CustomIconRenderer, registerIcons, } from "./icon-registry.js";
 export default Display;

package/dist/Display/index.js

@@ -2,7 +2,7 @@ import Accordion from "./Display.Accordion.js";
 import AmountSummary from "./Display.AmountSummary.js";
 import Avatar from "./Display.Avatar.js";
 import AvatarGroup from "./Display.AvatarGroup.js";
-import Badge, { BadgeVariants, } from "./Display.Badge.js";
+import Badge, { BadgeVariants } from "./Display.Badge.js";
 import Card from "./Display.Card.js";
 import Carousel from "./Display.Carousel.js";
 import Chip from "./Display.Chip.js";
@@ -35,6 +35,7 @@ import SearchHistory from "./Display.SearchHistory.js";
 import SectionHeader from "./Display.SectionHeader.js";
 import Stat from "./Display.Stat.js";
 import StatCard from "./Display.StatCard.js";
+import StatusBadge from "./Display.StatusBadge.js";
 import StatusDot from "./Display.StatusDot.js";
 import Story from "./Display.Story.js";
 import StoryTray from "./Display.StoryTray.js";
@@ -44,53 +45,57 @@ import Tag from "./Display.Tag.js";
 import Timeline from "./Display.Timeline.js";
 import Tooltip from "./Display.Tooltip.js";
 export const Display = {
-    AmountSummary,
-    Badge,
-    BadgeVariants,
-    Accordion,
-    Avatar,
-    AvatarGroup,
-    Card,
-    Carousel,
-    Chip,
-    Tag,
-    Image: DisplayImage,
-    ExpoImage,
-    MediaCard,
-    MediaEmbed,
-    Story,
-    StoryTray,
-    StoryViewer,
-    ListItem,
-    ListGroup,
-    KeyValue,
-    DataTable,
-    Stat,
-    StatCard,
-    StatusDot,
-    PriceTag,
-    ProductCard,
-    Timeline,
-    SearchHistory,
-    SectionHeader,
-    Rating,
-    SwipeableRow,
-    Tooltip,
-    IconBadge,
-    CopyableText,
-    Date,
-    Divider,
-    GradientSurface,
-    Icon,
-    CountRecords,
-    Logo,
-    CircleButton,
-    MenuButton,
-    MenuCard,
-    MenuGrid,
-    Monetary,
-    Pattern,
+  StatusBadge,
+  AmountSummary,
+  Badge,
+  BadgeVariants,
+  Accordion,
+  Avatar,
+  AvatarGroup,
+  Card,
+  Carousel,
+  Chip,
+  Tag,
+  Image: DisplayImage,
+  ExpoImage,
+  MediaCard,
+  MediaEmbed,
+  Story,
+  StoryTray,
+  StoryViewer,
+  ListItem,
+  ListGroup,
+  KeyValue,
+  DataTable,
+  Stat,
+  StatCard,
+  StatusDot,
+  PriceTag,
+  ProductCard,
+  Timeline,
+  SearchHistory,
+  SectionHeader,
+  Rating,
+  SwipeableRow,
+  Tooltip,
+  IconBadge,
+  CopyableText,
+  Date,
+  Divider,
+  GradientSurface,
+  Icon,
+  CountRecords,
+  Logo,
+  CircleButton,
+  MenuButton,
+  MenuCard,
+  MenuGrid,
+  Monetary,
+  Pattern
 };
 export { BadgeVariants };
-export { ICON_MAP, } from "./icon-map.js";
+export { defineStatuses, resolveStatus } from "./Display.StatusBadge.js";
+export { ICON_FONT_FAMILY, ICON_FONTS } from "./icon-font.js";
+export { ICON_NAMES } from "./icon-map.js";
+export { registerIcons } from "./icon-registry.js";
 export default Display;

package/dist/Display/pill.d.ts

@@ -0,0 +1,16 @@
+import type { typographyVariants } from "../theme/typography.js";
+import type { ReactNode } from "react";
+export interface PillLabelProps {
+    children: ReactNode;
+    /** Ink of the pill, e.g. `text-success`. */
+    className: string;
+    /** Status pills (`Badge`) are semibold; chips and tags are medium. */
+    semibold?: boolean;
+    /** A typography variant instead of the pill metrics, e.g. `caption` for denser lists. */
+    variant?: keyof typeof typographyVariants;
+}
+/**
+ * The label every pill of the DS shares (badges, chips, tags): one size, one line,
+ * and the configured DS font instead of a className font that the app never loads.
+ */
+export declare function PillLabel({ children, className, semibold, variant, }: PillLabelProps): import("react").JSX.Element;