@compsych-ui-components/react-native 4.0.0 → 4.0.13

package/src/components/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Alert/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport {\r\n  Pressable,\r\n  StyleProp,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type AlertVariant =\r\n  | 'default'\r\n  | 'elevated'\r\n  | 'informative'\r\n  | 'warning'\r\n  | 'positive'\r\n  | 'danger';\r\n\r\nexport type AlertSize = 'sm' | 'lg';\r\n\r\nexport interface AlertProps {\r\n  variant?: AlertVariant;\r\n  size?: AlertSize;\r\n  /** Bold title — lg size only */\r\n  title?: string;\r\n  /** Body / description text */\r\n  description: string;\r\n  /** Custom leading icon — overrides the default per-variant icon */\r\n  icon?: React.ReactNode;\r\n  /** Hide the leading icon entirely */\r\n  hideIcon?: boolean;\r\n  /** Label for the optional action button */\r\n  actionLabel?: string;\r\n  onAction?: () => void;\r\n  /** Show dismiss (×) button */\r\n  dismissible?: boolean;\r\n  onDismiss?: () => void;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Variant color map ────────────────────────────────────────────────────────\r\n\r\ntype VariantColors = {\r\n  bg: string;\r\n  text: string;\r\n  iconColor: string;\r\n  elevated: boolean;\r\n  actionBorder: boolean;\r\n};\r\n\r\ntype ColorRoles = ReturnType<typeof useTheme>['colorRoles'];\r\n\r\nfunction getVariantColors(\r\n  variant: AlertVariant,\r\n  cr: ColorRoles,\r\n): VariantColors {\r\n  switch (variant) {\r\n    case 'default':\r\n      return {\r\n        bg: cr.surface.surfaceContainer.sysSurfaceContainerLow,\r\n        text: cr.surface.surface.sysOnSurface,\r\n        iconColor: cr.surface.surface.sysOnSurfaceVariant,\r\n        elevated: false,\r\n        actionBorder: false,\r\n      };\r\n    case 'elevated':\r\n      return {\r\n        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        text: cr.surface.surface.sysOnSurface,\r\n        iconColor: cr.surface.surface.sysOnSurfaceVariant,\r\n        elevated: true,\r\n        actionBorder: true,\r\n      };\r\n    case 'informative':\r\n      return {\r\n        bg: cr.custom.info.sysInfoContainer,\r\n        text: cr.custom.info.sysOnInfoContainer,\r\n        iconColor: cr.custom.info.sysOnInfoContainer,\r\n        elevated: false,\r\n        actionBorder: false,\r\n      };\r\n    case 'warning':\r\n      return {\r\n        bg: cr.custom.warning.sysWarningContainer,\r\n        text: cr.custom.warning.sysOnWarningContainer,\r\n        iconColor: cr.custom.warning.sysOnWarningContainer,\r\n        elevated: false,\r\n        actionBorder: false,\r\n      };\r\n    case 'positive':\r\n      return {\r\n        bg: cr.custom.success.sysSuccessContainer,\r\n        text: cr.custom.success.sysOnSuccessContainer,\r\n        iconColor: cr.custom.success.sysOnSuccessContainer,\r\n        elevated: false,\r\n        actionBorder: false,\r\n      };\r\n    case 'danger':\r\n      return {\r\n        bg: cr.error.sysErrorContainer,\r\n        text: cr.error.sysOnErrorContainer,\r\n        iconColor: cr.error.sysOnErrorContainer,\r\n        elevated: false,\r\n        actionBorder: false,\r\n      };\r\n  }\r\n}\r\n\r\n// ── Default icon per variant ─────────────────────────────────────────────────\r\n\r\nfunction defaultIconName(\r\n  variant: AlertVariant,\r\n): React.ComponentProps<typeof Ionicons>['name'] {\r\n  switch (variant) {\r\n    case 'default':\r\n    case 'elevated':\r\n      return 'information-circle-outline';\r\n    case 'informative':\r\n      return 'information-circle';\r\n    case 'warning':\r\n      return 'warning';\r\n    case 'positive':\r\n      return 'checkmark-circle';\r\n    case 'danger':\r\n      return 'alert-circle';\r\n  }\r\n}\r\n\r\n// ── Component ────────────────────────────────────────────────────────────────\r\n\r\nexport function Alert({\r\n  variant = 'default',\r\n  size = 'lg',\r\n  title,\r\n  description,\r\n  icon,\r\n  hideIcon = false,\r\n  actionLabel,\r\n  onAction,\r\n  dismissible = false,\r\n  onDismiss,\r\n  style,\r\n}: AlertProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n  const c = getVariantColors(variant, cr);\r\n  const isLg = size === 'lg';\r\n\r\n  const resolvedIcon =\r\n    !hideIcon &&\r\n    (icon ?? (\r\n      <Ionicons\r\n        name={defaultIconName(variant)}\r\n        size={isLg ? 24 : 20}\r\n        color={c.iconColor}\r\n      />\r\n    ));\r\n\r\n  return (\r\n    <View\r\n      accessibilityRole=\"alert\"\r\n      accessibilityLiveRegion=\"polite\"\r\n      style={[\r\n        styles.root,\r\n        {\r\n          backgroundColor: c.bg,\r\n          borderRadius: isLg\r\n            ? dim.borderRadius.sysRadiusLg\r\n            : dim.borderRadius.sysRadiusMd,\r\n        },\r\n        c.elevated && styles.elevated,\r\n        style,\r\n      ]}\r\n    >\r\n      {/* ── Content row ─────────────────────────────────────────────────── */}\r\n      <View\r\n        style={[\r\n          styles.content,\r\n          {\r\n            paddingHorizontal: isLg\r\n              ? dim.spacing.padding.sysPadding24\r\n              : dim.spacing.padding.sysPadding16,\r\n            paddingVertical: isLg\r\n              ? dim.spacing.padding.sysPadding16\r\n              : dim.spacing.padding.sysPadding16,\r\n            gap: isLg\r\n              ? dim.spacing.padding.sysPadding16\r\n              : dim.spacing.padding.sysPadding12,\r\n            alignItems: isLg ? 'flex-start' : 'center',\r\n          },\r\n        ]}\r\n      >\r\n        {/* Leading icon */}\r\n        {resolvedIcon && (\r\n          <View\r\n            style={{\r\n              paddingTop: isLg ? dim.spacing.padding.sysPadding2 : 0,\r\n              flexShrink: 0,\r\n            }}\r\n          >\r\n            {resolvedIcon}\r\n          </View>\r\n        )}\r\n\r\n        {/* Text + action */}\r\n        <View style={styles.textAction}>\r\n          {/* Text block */}\r\n          <View style={[styles.textBlock, { gap: 4 }]}>\r\n            {isLg && title && (\r\n              <Text\r\n                style={{\r\n                  color: c.text,\r\n                  fontSize: ts.titleSmall.sysFontSize,\r\n                  lineHeight: ts.titleSmall.sysLineHeight,\r\n                  fontWeight: '500',\r\n                  includeFontPadding: false,\r\n                }}\r\n              >\r\n                {title}\r\n              </Text>\r\n            )}\r\n            <Text\r\n              style={{\r\n                color: c.text,\r\n                fontSize: isLg\r\n                  ? ts.bodyMedium.sysFontSize\r\n                  : ts.bodySmall.sysFontSize,\r\n                lineHeight: isLg\r\n                  ? ts.bodyMedium.sysLineHeight\r\n                  : ts.bodySmall.sysLineHeight,\r\n                fontWeight: '400',\r\n                includeFontPadding: false,\r\n              }}\r\n            >\r\n              {description}\r\n            </Text>\r\n          </View>\r\n\r\n          {/* Action button */}\r\n          {actionLabel &&\r\n            (isLg ? (\r\n              // lg: pill button with white bg + shadow (or border for elevated)\r\n              <Pressable\r\n                onPress={onAction}\r\n                accessibilityRole=\"button\"\r\n                accessibilityLabel={actionLabel}\r\n                style={({ pressed }) => [\r\n                  styles.actionLg,\r\n                  {\r\n                    backgroundColor:\r\n                      cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n                  },\r\n                  c.actionBorder && [\r\n                    styles.actionLgBorderBase,\r\n                    { borderColor: cr.outline.sysOutline },\r\n                  ],\r\n                  pressed && { opacity: 0.84 },\r\n                ]}\r\n              >\r\n                <Text\r\n                  style={{\r\n                    color: cr.surface.surface.sysOnSurface,\r\n                    fontSize: ts.labelMedium.sysFontSize,\r\n                    lineHeight: ts.labelMedium.sysLineHeight,\r\n                    fontWeight: '400',\r\n                    includeFontPadding: false,\r\n                  }}\r\n                >\r\n                  {actionLabel}\r\n                </Text>\r\n              </Pressable>\r\n            ) : (\r\n              // sm: text-only button\r\n              <Pressable\r\n                onPress={onAction}\r\n                accessibilityRole=\"button\"\r\n                accessibilityLabel={actionLabel}\r\n                style={styles.actionSm}\r\n              >\r\n                <Text\r\n                  style={{\r\n                    color: c.text,\r\n                    fontSize: ts.labelMedium.sysFontSize,\r\n                    lineHeight: ts.labelMedium.sysLineHeight,\r\n                    fontWeight: '500',\r\n                    includeFontPadding: false,\r\n                  }}\r\n                >\r\n                  {actionLabel}\r\n                </Text>\r\n              </Pressable>\r\n            ))}\r\n        </View>\r\n\r\n        {/* Dismiss button */}\r\n        {dismissible && (\r\n          <Pressable\r\n            onPress={onDismiss}\r\n            accessibilityRole=\"button\"\r\n            accessibilityLabel=\"Dismiss\"\r\n            style={({ pressed }) => [\r\n              styles.closeBtn,\r\n              isLg ? styles.closeBtnLg : styles.closeBtnSm,\r\n              pressed && { opacity: 0.6 },\r\n            ]}\r\n          >\r\n            <Ionicons name=\"close\" size={16} color={c.iconColor} />\r\n          </Pressable>\r\n        )}\r\n      </View>\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  root: {\r\n    overflow: 'hidden',\r\n  },\r\n  elevated: {\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 2 },\r\n    shadowOpacity: 0.06,\r\n    shadowRadius: 4,\r\n    elevation: 1,\r\n    overflow: 'visible',\r\n  },\r\n  content: {\r\n    flexDirection: 'row',\r\n  },\r\n  textAction: {\r\n    flex: 1,\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    minWidth: 0,\r\n    gap: 16,\r\n  },\r\n  textBlock: {\r\n    flex: 1,\r\n    minWidth: 0,\r\n  },\r\n  // lg action button — elevated pill (backgroundColor and borderColor applied inline)\r\n  actionLg: {\r\n    height: 40,\r\n    paddingHorizontal: 24,\r\n    borderRadius: 9999,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    flexShrink: 0,\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 2 },\r\n    shadowOpacity: 0.06,\r\n    shadowRadius: 4,\r\n    elevation: 1,\r\n  },\r\n  actionLgBorderBase: {\r\n    borderWidth: 1,\r\n  },\r\n  // sm action button — text only\r\n  actionSm: {\r\n    flexShrink: 0,\r\n  },\r\n  closeBtn: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    borderRadius: 9999,\r\n  },\r\n  closeBtnLg: {\r\n    position: 'absolute',\r\n    top: 8,\r\n    right: 8,\r\n    width: 32,\r\n    height: 32,\r\n  },\r\n  closeBtnSm: {\r\n    width: 32,\r\n    height: 32,\r\n    flexShrink: 0,\r\n  },\r\n});\r\n"],"names":["Alert","getVariantColors","variant","cr","bg","surface","surfaceContainer","sysSurfaceContainerLow","text","sysOnSurface","iconColor","sysOnSurfaceVariant","elevated","actionBorder","sysSurfaceContainerLowest","custom","info","sysInfoContainer","sysOnInfoContainer","warning","sysWarningContainer","sysOnWarningContainer","success","sysSuccessContainer","sysOnSuccessContainer","error","sysErrorContainer","sysOnErrorContainer","defaultIconName","size","title","description","icon","hideIcon","actionLabel","onAction","dismissible","onDismiss","style","colorRoles","dimensions","dim","typeScale","ts","useTheme","c","isLg","resolvedIcon","Ionicons","name","color","View","accessibilityRole","accessibilityLiveRegion","styles","root","backgroundColor","borderRadius","sysRadiusLg","sysRadiusMd","content","paddingHorizontal","spacing","padding","sysPadding24","sysPadding16","paddingVertical","gap","sysPadding12","alignItems","paddingTop","sysPadding2","flexShrink","textAction","textBlock","Text","fontSize","titleSmall","sysFontSize","lineHeight","sysLineHeight","fontWeight","includeFontPadding","bodyMedium","bodySmall","Pressable","onPress","accessibilityLabel","pressed","actionLg","actionLgBorderBase","borderColor","outline","sysOutline","opacity","labelMedium","actionSm","closeBtn","closeBtnLg","closeBtnSm","StyleSheet","create","overflow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","flexDirection","flex","justifyContent","minWidth","borderWidth","position","top","right"],"mappings":";;;;+BAuIgBA;;;eAAAA;;;;8DAvIE;6BASX;6BAEkB;uBAEA;;;;;;AA4CzB,SAASC,iBACPC,OAAqB,EACrBC,EAAc;IAEd,OAAQD;QACN,KAAK;YACH,OAAO;gBACLE,IAAID,GAAGE,OAAO,CAACC,gBAAgB,CAACC,sBAAsB;gBACtDC,MAAML,GAAGE,OAAO,CAACA,OAAO,CAACI,YAAY;gBACrCC,WAAWP,GAAGE,OAAO,CAACA,OAAO,CAACM,mBAAmB;gBACjDC,UAAU;gBACVC,cAAc;YAChB;QACF,KAAK;YACH,OAAO;gBACLT,IAAID,GAAGE,OAAO,CAACC,gBAAgB,CAACQ,yBAAyB;gBACzDN,MAAML,GAAGE,OAAO,CAACA,OAAO,CAACI,YAAY;gBACrCC,WAAWP,GAAGE,OAAO,CAACA,OAAO,CAACM,mBAAmB;gBACjDC,UAAU;gBACVC,cAAc;YAChB;QACF,KAAK;YACH,OAAO;gBACLT,IAAID,GAAGY,MAAM,CAACC,IAAI,CAACC,gBAAgB;gBACnCT,MAAML,GAAGY,MAAM,CAACC,IAAI,CAACE,kBAAkB;gBACvCR,WAAWP,GAAGY,MAAM,CAACC,IAAI,CAACE,kBAAkB;gBAC5CN,UAAU;gBACVC,cAAc;YAChB;QACF,KAAK;YACH,OAAO;gBACLT,IAAID,GAAGY,MAAM,CAACI,OAAO,CAACC,mBAAmB;gBACzCZ,MAAML,GAAGY,MAAM,CAACI,OAAO,CAACE,qBAAqB;gBAC7CX,WAAWP,GAAGY,MAAM,CAACI,OAAO,CAACE,qBAAqB;gBAClDT,UAAU;gBACVC,cAAc;YAChB;QACF,KAAK;YACH,OAAO;gBACLT,IAAID,GAAGY,MAAM,CAACO,OAAO,CAACC,mBAAmB;gBACzCf,MAAML,GAAGY,MAAM,CAACO,OAAO,CAACE,qBAAqB;gBAC7Cd,WAAWP,GAAGY,MAAM,CAACO,OAAO,CAACE,qBAAqB;gBAClDZ,UAAU;gBACVC,cAAc;YAChB;QACF,KAAK;YACH,OAAO;gBACLT,IAAID,GAAGsB,KAAK,CAACC,iBAAiB;gBAC9BlB,MAAML,GAAGsB,KAAK,CAACE,mBAAmB;gBAClCjB,WAAWP,GAAGsB,KAAK,CAACE,mBAAmB;gBACvCf,UAAU;gBACVC,cAAc;YAChB;IACJ;AACF;AAEA,gFAAgF;AAEhF,SAASe,gBACP1B,OAAqB;IAErB,OAAQA;QACN,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;IACX;AACF;AAIO,SAASF,MAAM,EACpBE,UAAU,SAAS,EACnB2B,OAAO,IAAI,EACXC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,WAAW,KAAK,EAChBC,WAAW,EACXC,QAAQ,EACRC,cAAc,KAAK,EACnBC,SAAS,EACTC,KAAK,EACM;IACX,MAAM,EAAEC,YAAYpC,EAAE,EAAEqC,YAAYC,GAAG,EAAEC,WAAWC,EAAE,EAAE,GAAGC,IAAAA,eAAQ;IACnE,MAAMC,IAAI5C,iBAAiBC,SAASC;IACpC,MAAM2C,OAAOjB,SAAS;IAEtB,MAAMkB,eACJ,CAACd,YACAD,CAAAA,sBACC,qBAACgB,qBAAQ;QACPC,MAAMrB,gBAAgB1B;QACtB2B,MAAMiB,OAAO,KAAK;QAClBI,OAAOL,EAAEnC,SAAS;MAEtB;IAEF,qBACE,qBAACyC,iBAAI;QACHC,mBAAkB;QAClBC,yBAAwB;QACxBf,OAAO;YACLgB,OAAOC,IAAI;YACX;gBACEC,iBAAiBX,EAAEzC,EAAE;gBACrBqD,cAAcX,OACVL,IAAIgB,YAAY,CAACC,WAAW,GAC5BjB,IAAIgB,YAAY,CAACE,WAAW;YAClC;YACAd,EAAEjC,QAAQ,IAAI0C,OAAO1C,QAAQ;YAC7B0B;SACD;kBAGD,cAAA,sBAACa,iBAAI;YACHb,OAAO;gBACLgB,OAAOM,OAAO;gBACd;oBACEC,mBAAmBf,OACfL,IAAIqB,OAAO,CAACC,OAAO,CAACC,YAAY,GAChCvB,IAAIqB,OAAO,CAACC,OAAO,CAACE,YAAY;oBACpCC,iBAAiBpB,OACbL,IAAIqB,OAAO,CAACC,OAAO,CAACE,YAAY,GAChCxB,IAAIqB,OAAO,CAACC,OAAO,CAACE,YAAY;oBACpCE,KAAKrB,OACDL,IAAIqB,OAAO,CAACC,OAAO,CAACE,YAAY,GAChCxB,IAAIqB,OAAO,CAACC,OAAO,CAACK,YAAY;oBACpCC,YAAYvB,OAAO,eAAe;gBACpC;aACD;;gBAGAC,8BACC,qBAACI,iBAAI;oBACHb,OAAO;wBACLgC,YAAYxB,OAAOL,IAAIqB,OAAO,CAACC,OAAO,CAACQ,WAAW,GAAG;wBACrDC,YAAY;oBACd;8BAECzB;;8BAKL,sBAACI,iBAAI;oBAACb,OAAOgB,OAAOmB,UAAU;;sCAE5B,sBAACtB,iBAAI;4BAACb,OAAO;gCAACgB,OAAOoB,SAAS;gCAAE;oCAAEP,KAAK;gCAAE;6BAAE;;gCACxCrB,QAAQhB,uBACP,qBAAC6C,iBAAI;oCACHrC,OAAO;wCACLY,OAAOL,EAAErC,IAAI;wCACboE,UAAUjC,GAAGkC,UAAU,CAACC,WAAW;wCACnCC,YAAYpC,GAAGkC,UAAU,CAACG,aAAa;wCACvCC,YAAY;wCACZC,oBAAoB;oCACtB;8CAECpD;;8CAGL,qBAAC6C,iBAAI;oCACHrC,OAAO;wCACLY,OAAOL,EAAErC,IAAI;wCACboE,UAAU9B,OACNH,GAAGwC,UAAU,CAACL,WAAW,GACzBnC,GAAGyC,SAAS,CAACN,WAAW;wCAC5BC,YAAYjC,OACRH,GAAGwC,UAAU,CAACH,aAAa,GAC3BrC,GAAGyC,SAAS,CAACJ,aAAa;wCAC9BC,YAAY;wCACZC,oBAAoB;oCACtB;8CAECnD;;;;wBAKJG,eACEY,CAAAA,OACC,kEAAkE;sCAClE,qBAACuC,sBAAS;4BACRC,SAASnD;4BACTiB,mBAAkB;4BAClBmC,oBAAoBrD;4BACpBI,OAAO,CAAC,EAAEkD,OAAO,EAAE,GAAK;oCACtBlC,OAAOmC,QAAQ;oCACf;wCACEjC,iBACErD,GAAGE,OAAO,CAACC,gBAAgB,CAACQ,yBAAyB;oCACzD;oCACA+B,EAAEhC,YAAY,IAAI;wCAChByC,OAAOoC,kBAAkB;wCACzB;4CAAEC,aAAaxF,GAAGyF,OAAO,CAACC,UAAU;wCAAC;qCACtC;oCACDL,WAAW;wCAAEM,SAAS;oCAAK;iCAC5B;sCAED,cAAA,qBAACnB,iBAAI;gCACHrC,OAAO;oCACLY,OAAO/C,GAAGE,OAAO,CAACA,OAAO,CAACI,YAAY;oCACtCmE,UAAUjC,GAAGoD,WAAW,CAACjB,WAAW;oCACpCC,YAAYpC,GAAGoD,WAAW,CAACf,aAAa;oCACxCC,YAAY;oCACZC,oBAAoB;gCACtB;0CAEChD;;6BAIL,uBAAuB;sCACvB,qBAACmD,sBAAS;4BACRC,SAASnD;4BACTiB,mBAAkB;4BAClBmC,oBAAoBrD;4BACpBI,OAAOgB,OAAO0C,QAAQ;sCAEtB,cAAA,qBAACrB,iBAAI;gCACHrC,OAAO;oCACLY,OAAOL,EAAErC,IAAI;oCACboE,UAAUjC,GAAGoD,WAAW,CAACjB,WAAW;oCACpCC,YAAYpC,GAAGoD,WAAW,CAACf,aAAa;oCACxCC,YAAY;oCACZC,oBAAoB;gCACtB;0CAEChD;;0BAGP;;;gBAIHE,6BACC,qBAACiD,sBAAS;oBACRC,SAASjD;oBACTe,mBAAkB;oBAClBmC,oBAAmB;oBACnBjD,OAAO,CAAC,EAAEkD,OAAO,EAAE,GAAK;4BACtBlC,OAAO2C,QAAQ;4BACfnD,OAAOQ,OAAO4C,UAAU,GAAG5C,OAAO6C,UAAU;4BAC5CX,WAAW;gCAAEM,SAAS;4BAAI;yBAC3B;8BAED,cAAA,qBAAC9C,qBAAQ;wBAACC,MAAK;wBAAQpB,MAAM;wBAAIqB,OAAOL,EAAEnC,SAAS;;;;;;AAM/D;AAEA,MAAM4C,SAAS8C,uBAAU,CAACC,MAAM,CAAC;IAC/B9C,MAAM;QACJ+C,UAAU;IACZ;IACA1F,UAAU;QACR2F,aAAa;QACbC,cAAc;YAAEC,OAAO;YAAGC,QAAQ;QAAE;QACpCC,eAAe;QACfC,cAAc;QACdC,WAAW;QACXP,UAAU;IACZ;IACA1C,SAAS;QACPkD,eAAe;IACjB;IACArC,YAAY;QACVsC,MAAM;QACND,eAAe;QACfzC,YAAY;QACZ2C,gBAAgB;QAChBC,UAAU;QACV9C,KAAK;IACP;IACAO,WAAW;QACTqC,MAAM;QACNE,UAAU;IACZ;IACA,oFAAoF;IACpFxB,UAAU;QACRiB,QAAQ;QACR7C,mBAAmB;QACnBJ,cAAc;QACdY,YAAY;QACZ2C,gBAAgB;QAChBxC,YAAY;QACZ+B,aAAa;QACbC,cAAc;YAAEC,OAAO;YAAGC,QAAQ;QAAE;QACpCC,eAAe;QACfC,cAAc;QACdC,WAAW;IACb;IACAnB,oBAAoB;QAClBwB,aAAa;IACf;IACA,+BAA+B;IAC/BlB,UAAU;QACRxB,YAAY;IACd;IACAyB,UAAU;QACR5B,YAAY;QACZ2C,gBAAgB;QAChBvD,cAAc;IAChB;IACAyC,YAAY;QACViB,UAAU;QACVC,KAAK;QACLC,OAAO;QACPZ,OAAO;QACPC,QAAQ;IACV;IACAP,YAAY;QACVM,OAAO;QACPC,QAAQ;QACRlC,YAAY;IACd;AACF"}

package/src/components/Avatar/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type AvatarVariant = 'text' | 'image' | 'icon';
+export interface AvatarProps {
+    variant?: AvatarVariant;
+    size?: AvatarSize;
+    /** Text variant — up to 2 initials, e.g. "CP" */
+    initials?: string;
+    /** Image variant — any React Native image source */
+    source?: ImageSourcePropType;
+    /** Icon variant — custom node; omit to use the default person icon */
+    icon?: React.ReactNode;
+    /** Renders a coloured ring around the avatar */
+    activityRing?: boolean;
+    /** Renders a shield-check badge at the bottom-right corner */
+    presenceBadge?: boolean;
+    /** Accessible label announced by screen readers */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Avatar({ variant, size, initials, source, icon, activityRing, presenceBadge, accessibilityLabel, style, }: AvatarProps): React.JSX.Element;

package/src/components/Avatar/index.js

@@ -0,0 +1,253 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Avatar", {
+    enumerable: true,
+    get: function() {
+        return Avatar;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _vectoricons = require("@expo/vector-icons");
+const _theme = require("../../theme");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function Avatar({ variant = 'text', size = 'md', initials = 'CP', source, icon, activityRing = false, presenceBadge = false, accessibilityLabel, style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const sizeTokens = (0, _react.useMemo)(()=>({
+            xs: {
+                diameter: 24,
+                fontSize: ts.labelSmall.sysFontSize,
+                lineHeight: ts.labelSmall.sysLineHeight,
+                fontWeight: '400',
+                iconSize: 12,
+                ringBorder: dim.borderWidth.sysStrokeMedium,
+                ringInset: -1,
+                badgeSize: 0,
+                badgeIconSize: 0,
+                badgeOffset: 0
+            },
+            sm: {
+                diameter: 32,
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                fontWeight: '400',
+                iconSize: 16,
+                ringBorder: dim.borderWidth.sysStrokeMedium,
+                ringInset: -2,
+                badgeSize: 16,
+                badgeIconSize: 12,
+                badgeOffset: -4
+            },
+            md: {
+                diameter: 40,
+                fontSize: ts.labelLarge.sysFontSize,
+                lineHeight: ts.labelLarge.sysLineHeight,
+                fontWeight: '500',
+                iconSize: 20,
+                ringBorder: dim.borderWidth.sysStrokeThick,
+                ringInset: -2,
+                badgeSize: 20,
+                badgeIconSize: 16,
+                badgeOffset: -4
+            },
+            lg: {
+                diameter: 48,
+                fontSize: ts.labelLarge.sysFontSize,
+                lineHeight: ts.labelLarge.sysLineHeight,
+                fontWeight: '500',
+                iconSize: 24,
+                ringBorder: dim.borderWidth.sysStrokeThick,
+                ringInset: -2,
+                badgeSize: 20,
+                badgeIconSize: 16,
+                badgeOffset: -4
+            },
+            xl: {
+                diameter: 64,
+                fontSize: ts.labelLarge.sysFontSize,
+                lineHeight: ts.labelLarge.sysLineHeight,
+                fontWeight: '500',
+                iconSize: 32,
+                ringBorder: dim.borderWidth.sysStrokeThick,
+                ringInset: -2,
+                badgeSize: 24,
+                badgeIconSize: 20,
+                badgeOffset: -4
+            },
+            '2xl': {
+                diameter: 88,
+                fontSize: ts.titleMedium.sysFontSize,
+                lineHeight: ts.titleMedium.sysLineHeight,
+                fontWeight: '400',
+                iconSize: 44,
+                ringBorder: dim.borderWidth.sysStrokeBold,
+                ringInset: -2,
+                badgeSize: 32,
+                badgeIconSize: 24,
+                badgeOffset: 0
+            },
+            '3xl': {
+                diameter: 120,
+                fontSize: ts.titleLarge.sysFontSize,
+                lineHeight: ts.titleLarge.sysLineHeight,
+                fontWeight: '500',
+                iconSize: 60,
+                ringBorder: dim.borderWidth.sysStrokeBold,
+                ringInset: -2,
+                badgeSize: 32,
+                badgeIconSize: 24,
+                badgeOffset: 0
+            }
+        }), [
+        dim,
+        ts
+    ]);
+    const s = sizeTokens[size];
+    const r = s.diameter / 2;
+    const defaultLabel = variant === 'text' ? `Avatar: ${initials}` : 'Avatar';
+    return(// Outer wrapper — same footprint as avatar, does NOT clip so ring/badge
+    // can overflow its bounds freely.
+    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        accessible: true,
+        accessibilityRole: "image",
+        accessibilityLabel: accessibilityLabel ?? defaultLabel,
+        style: [
+            {
+                width: s.diameter,
+                height: s.diameter
+            },
+            style
+        ],
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: [
+                    styles.circle,
+                    {
+                        width: s.diameter,
+                        height: s.diameter,
+                        borderRadius: r,
+                        backgroundColor: variant !== 'image' ? cr.custom.info.sysInfoContainer : undefined
+                    }
+                ],
+                children: [
+                    variant === 'text' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                        style: {
+                            color: cr.custom.info.sysOnInfoContainer,
+                            fontSize: s.fontSize,
+                            lineHeight: s.lineHeight,
+                            fontWeight: s.fontWeight,
+                            includeFontPadding: false,
+                            textAlign: 'center'
+                        },
+                        numberOfLines: 1,
+                        children: initials
+                    }),
+                    variant === 'image' && source && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Image, {
+                        source: source,
+                        style: {
+                            width: s.diameter,
+                            height: s.diameter
+                        },
+                        resizeMode: "cover"
+                    }),
+                    variant === 'icon' && (icon ?? /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                        name: "person",
+                        size: s.iconSize,
+                        color: cr.custom.info.sysOnInfoContainer
+                    }))
+                ]
+            }),
+            activityRing && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                accessible: false,
+                style: {
+                    position: 'absolute',
+                    top: s.ringInset,
+                    left: s.ringInset,
+                    right: s.ringInset,
+                    bottom: s.ringInset,
+                    borderRadius: r + Math.abs(s.ringInset),
+                    borderWidth: s.ringBorder,
+                    borderColor: cr.accent.primary.sysPrimary
+                },
+                pointerEvents: "none"
+            }),
+            presenceBadge && s.badgeSize > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                accessible: false,
+                style: [
+                    styles.badge,
+                    {
+                        width: s.badgeSize,
+                        height: s.badgeSize,
+                        borderRadius: s.badgeSize / 2,
+                        bottom: s.badgeOffset,
+                        right: s.badgeOffset,
+                        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest
+                    }
+                ],
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                    name: "shield-checkmark",
+                    size: s.badgeIconSize,
+                    color: cr.custom.info.sysOnInfoContainer
+                })
+            })
+        ]
+    }));
+}
+const styles = _reactnative.StyleSheet.create({
+    circle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden'
+    },
+    badge: {
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden'
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Avatar/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Image,\r\n  ImageSourcePropType,\r\n  StyleProp,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\r\nexport type AvatarVariant = 'text' | 'image' | 'icon';\r\n\r\nexport interface AvatarProps {\r\n  variant?: AvatarVariant;\r\n  size?: AvatarSize;\r\n  /** Text variant — up to 2 initials, e.g. \"CP\" */\r\n  initials?: string;\r\n  /** Image variant — any React Native image source */\r\n  source?: ImageSourcePropType;\r\n  /** Icon variant — custom node; omit to use the default person icon */\r\n  icon?: React.ReactNode;\r\n  /** Renders a coloured ring around the avatar */\r\n  activityRing?: boolean;\r\n  /** Renders a shield-check badge at the bottom-right corner */\r\n  presenceBadge?: boolean;\r\n  /** Accessible label announced by screen readers */\r\n  accessibilityLabel?: string;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function Avatar({\r\n  variant = 'text',\r\n  size = 'md',\r\n  initials = 'CP',\r\n  source,\r\n  icon,\r\n  activityRing = false,\r\n  presenceBadge = false,\r\n  accessibilityLabel,\r\n  style,\r\n}: AvatarProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n  const sizeTokens = useMemo(\r\n    () => ({\r\n      xs: {\r\n        diameter: 24,\r\n        fontSize: ts.labelSmall.sysFontSize,\r\n        lineHeight: ts.labelSmall.sysLineHeight,\r\n        fontWeight: '400' as const,\r\n        iconSize: 12,\r\n        ringBorder: dim.borderWidth.sysStrokeMedium,\r\n        ringInset: -1,\r\n        badgeSize: 0,\r\n        badgeIconSize: 0,\r\n        badgeOffset: 0,\r\n      },\r\n      sm: {\r\n        diameter: 32,\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        fontWeight: '400' as const,\r\n        iconSize: 16,\r\n        ringBorder: dim.borderWidth.sysStrokeMedium,\r\n        ringInset: -2,\r\n        badgeSize: 16,\r\n        badgeIconSize: 12,\r\n        badgeOffset: -4,\r\n      },\r\n      md: {\r\n        diameter: 40,\r\n        fontSize: ts.labelLarge.sysFontSize,\r\n        lineHeight: ts.labelLarge.sysLineHeight,\r\n        fontWeight: '500' as const,\r\n        iconSize: 20,\r\n        ringBorder: dim.borderWidth.sysStrokeThick,\r\n        ringInset: -2,\r\n        badgeSize: 20,\r\n        badgeIconSize: 16,\r\n        badgeOffset: -4,\r\n      },\r\n      lg: {\r\n        diameter: 48,\r\n        fontSize: ts.labelLarge.sysFontSize,\r\n        lineHeight: ts.labelLarge.sysLineHeight,\r\n        fontWeight: '500' as const,\r\n        iconSize: 24,\r\n        ringBorder: dim.borderWidth.sysStrokeThick,\r\n        ringInset: -2,\r\n        badgeSize: 20,\r\n        badgeIconSize: 16,\r\n        badgeOffset: -4,\r\n      },\r\n      xl: {\r\n        diameter: 64,\r\n        fontSize: ts.labelLarge.sysFontSize,\r\n        lineHeight: ts.labelLarge.sysLineHeight,\r\n        fontWeight: '500' as const,\r\n        iconSize: 32,\r\n        ringBorder: dim.borderWidth.sysStrokeThick,\r\n        ringInset: -2,\r\n        badgeSize: 24,\r\n        badgeIconSize: 20,\r\n        badgeOffset: -4,\r\n      },\r\n      '2xl': {\r\n        diameter: 88,\r\n        fontSize: ts.titleMedium.sysFontSize,\r\n        lineHeight: ts.titleMedium.sysLineHeight,\r\n        fontWeight: '400' as const,\r\n        iconSize: 44,\r\n        ringBorder: dim.borderWidth.sysStrokeBold,\r\n        ringInset: -2,\r\n        badgeSize: 32,\r\n        badgeIconSize: 24,\r\n        badgeOffset: 0,\r\n      },\r\n      '3xl': {\r\n        diameter: 120,\r\n        fontSize: ts.titleLarge.sysFontSize,\r\n        lineHeight: ts.titleLarge.sysLineHeight,\r\n        fontWeight: '500' as const,\r\n        iconSize: 60,\r\n        ringBorder: dim.borderWidth.sysStrokeBold,\r\n        ringInset: -2,\r\n        badgeSize: 32,\r\n        badgeIconSize: 24,\r\n        badgeOffset: 0,\r\n      },\r\n    }),\r\n    [dim, ts],\r\n  );\r\n\r\n  const s = sizeTokens[size];\r\n  const r = s.diameter / 2;\r\n\r\n  const defaultLabel = variant === 'text' ? `Avatar: ${initials}` : 'Avatar';\r\n\r\n  return (\r\n    // Outer wrapper — same footprint as avatar, does NOT clip so ring/badge\r\n    // can overflow its bounds freely.\r\n    <View\r\n      accessible\r\n      accessibilityRole=\"image\"\r\n      accessibilityLabel={accessibilityLabel ?? defaultLabel}\r\n      style={[{ width: s.diameter, height: s.diameter }, style]}\r\n    >\r\n      {/* ── Avatar circle ─────────────────────────────────────────────── */}\r\n      <View\r\n        style={[\r\n          styles.circle,\r\n          {\r\n            width: s.diameter,\r\n            height: s.diameter,\r\n            borderRadius: r,\r\n            backgroundColor:\r\n              variant !== 'image' ? cr.custom.info.sysInfoContainer : undefined,\r\n          },\r\n        ]}\r\n      >\r\n        {variant === 'text' && (\r\n          <Text\r\n            style={{\r\n              color: cr.custom.info.sysOnInfoContainer,\r\n              fontSize: s.fontSize,\r\n              lineHeight: s.lineHeight,\r\n              fontWeight: s.fontWeight,\r\n              includeFontPadding: false,\r\n              textAlign: 'center',\r\n            }}\r\n            numberOfLines={1}\r\n          >\r\n            {initials}\r\n          </Text>\r\n        )}\r\n\r\n        {variant === 'image' && source && (\r\n          <Image\r\n            source={source}\r\n            style={{ width: s.diameter, height: s.diameter }}\r\n            resizeMode=\"cover\"\r\n          />\r\n        )}\r\n\r\n        {variant === 'icon' &&\r\n          (icon ?? (\r\n            <Ionicons\r\n              name=\"person\"\r\n              size={s.iconSize}\r\n              color={cr.custom.info.sysOnInfoContainer}\r\n            />\r\n          ))}\r\n      </View>\r\n\r\n      {/* ── Activity ring ─────────────────────────────────────────────── */}\r\n      {activityRing && (\r\n        <View\r\n          accessible={false}\r\n          style={{\r\n            position: 'absolute',\r\n            top: s.ringInset,\r\n            left: s.ringInset,\r\n            right: s.ringInset,\r\n            bottom: s.ringInset,\r\n            borderRadius: r + Math.abs(s.ringInset),\r\n            borderWidth: s.ringBorder,\r\n            borderColor: cr.accent.primary.sysPrimary,\r\n          }}\r\n          pointerEvents=\"none\"\r\n        />\r\n      )}\r\n\r\n      {/* ── Presence badge ────────────────────────────────────────────── */}\r\n      {presenceBadge && s.badgeSize > 0 && (\r\n        <View\r\n          accessible={false}\r\n          style={[\r\n            styles.badge,\r\n            {\r\n              width: s.badgeSize,\r\n              height: s.badgeSize,\r\n              borderRadius: s.badgeSize / 2,\r\n              bottom: s.badgeOffset,\r\n              right: s.badgeOffset,\r\n              backgroundColor:\r\n                cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n            },\r\n          ]}\r\n        >\r\n          <Ionicons\r\n            name=\"shield-checkmark\"\r\n            size={s.badgeIconSize}\r\n            color={cr.custom.info.sysOnInfoContainer}\r\n          />\r\n        </View>\r\n      )}\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  circle: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden', // clips images to the circle\r\n  },\r\n  badge: {\r\n    position: 'absolute',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden',\r\n  },\r\n});\r\n"],"names":["Avatar","variant","size","initials","source","icon","activityRing","presenceBadge","accessibilityLabel","style","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","sizeTokens","useMemo","xs","diameter","fontSize","labelSmall","sysFontSize","lineHeight","sysLineHeight","fontWeight","iconSize","ringBorder","borderWidth","sysStrokeMedium","ringInset","badgeSize","badgeIconSize","badgeOffset","sm","labelMedium","md","labelLarge","sysStrokeThick","lg","xl","titleMedium","sysStrokeBold","titleLarge","s","r","defaultLabel","View","accessible","accessibilityRole","width","height","styles","circle","borderRadius","backgroundColor","custom","info","sysInfoContainer","undefined","Text","color","sysOnInfoContainer","includeFontPadding","textAlign","numberOfLines","Image","resizeMode","Ionicons","name","position","top","left","right","bottom","Math","abs","borderColor","accent","primary","sysPrimary","pointerEvents","badge","surface","surfaceContainer","sysSurfaceContainerLowest","StyleSheet","create","alignItems","justifyContent","overflow"],"mappings":"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"}

package/src/components/Badge/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeStyle = 'filled' | 'positive' | 'danger' | 'elevated' | 'tonal' | 'dot';
+export interface BadgeProps {
+    /** Number or short string to display — ignored for `dot` style */
+    label?: number | string;
+    size?: BadgeSize;
+    badgeStyle?: BadgeStyle;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Badge({ label, size, badgeStyle, style, }: BadgeProps): React.JSX.Element;

package/src/components/Badge/index.js

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Badge", {
+    enumerable: true,
+    get: function() {
+        return Badge;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _theme = require("../../theme");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function getStyleColors(style, cr) {
+    switch(style){
+        case 'filled':
+            return {
+                bg: cr.accent.primary.sysPrimary,
+                text: cr.accent.primary.sysOnPrimary,
+                elevated: false
+            };
+        case 'positive':
+            return {
+                bg: cr.custom.success.sysSuccess,
+                text: cr.custom.success.sysOnSuccess,
+                elevated: false
+            };
+        case 'danger':
+            return {
+                bg: cr.error.sysError,
+                text: cr.error.sysOnError,
+                elevated: false
+            };
+        case 'elevated':
+            return {
+                bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                text: cr.surface.surface.sysOnSurface,
+                elevated: true
+            };
+        case 'tonal':
+            return {
+                bg: cr.surface.surfaceContainer.sysSurfaceContainer,
+                text: cr.surface.surface.sysOnSurface,
+                elevated: false
+            };
+        case 'dot':
+            // Container is transparent; the dot itself is sysPrimary
+            return {
+                bg: 'transparent',
+                text: 'transparent',
+                elevated: false
+            };
+    }
+}
+function Badge({ label, size = 'md', badgeStyle = 'filled', style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const sizeTokens = (0, _react.useMemo)(()=>({
+            sm: {
+                outerSize: 16,
+                paddingH: dim.spacing.padding.sysPadding4,
+                fontSize: ts.labelSmall.sysFontSize,
+                lineHeight: ts.labelSmall.sysLineHeight,
+                letterSpacing: ts.labelSmall.sysTracking,
+                dotInner: 6
+            },
+            md: {
+                outerSize: 20,
+                paddingH: dim.spacing.padding.sysPadding8,
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                letterSpacing: ts.labelMedium.sysTracking,
+                dotInner: 8
+            },
+            lg: {
+                outerSize: 24,
+                paddingH: dim.spacing.padding.sysPadding8,
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                letterSpacing: ts.labelMedium.sysTracking,
+                dotInner: 12
+            }
+        }), [
+        dim,
+        ts
+    ]);
+    const s = sizeTokens[size];
+    const c = getStyleColors(badgeStyle, cr);
+    // Dot variant — render a solid filled circle inside a transparent wrapper
+    if (badgeStyle === 'dot') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+            accessible: false,
+            style: [
+                {
+                    width: s.outerSize,
+                    height: s.outerSize,
+                    borderRadius: s.outerSize / 2,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                style
+            ],
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: {
+                    width: s.dotInner,
+                    height: s.dotInner,
+                    borderRadius: s.dotInner / 2,
+                    backgroundColor: cr.accent.primary.sysPrimary
+                }
+            })
+        });
+    }
+    // Number/text badge — pill that is at minimum a circle, grows wider for
+    // longer labels (e.g. "99+")
+    const displayLabel = label !== undefined ? String(label) : '';
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        accessible: true,
+        accessibilityLabel: displayLabel ? `${displayLabel} badge` : 'Badge',
+        style: [
+            styles.root,
+            {
+                minWidth: s.outerSize,
+                height: s.outerSize,
+                borderRadius: s.outerSize / 2,
+                paddingHorizontal: s.paddingH,
+                backgroundColor: c.bg
+            },
+            c.elevated && styles.elevated,
+            style
+        ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+            style: {
+                color: c.text,
+                fontSize: s.fontSize,
+                lineHeight: s.lineHeight,
+                letterSpacing: s.letterSpacing,
+                fontWeight: '500',
+                includeFontPadding: false,
+                textAlign: 'center'
+            },
+            numberOfLines: 1,
+            children: displayLabel
+        })
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    root: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        // overflow visible so elevated shadow renders outside the pill
+        overflow: 'visible'
+    },
+    elevated: {
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.06,
+        shadowRadius: 4,
+        elevation: 1
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Badge/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type BadgeSize = 'sm' | 'md' | 'lg';\r\nexport type BadgeStyle =\r\n  | 'filled'\r\n  | 'positive'\r\n  | 'danger'\r\n  | 'elevated'\r\n  | 'tonal'\r\n  | 'dot';\r\n\r\nexport interface BadgeProps {\r\n  /** Number or short string to display — ignored for `dot` style */\r\n  label?: number | string;\r\n  size?: BadgeSize;\r\n  badgeStyle?: BadgeStyle;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Style/color tokens ────────────────────────────────────────────────────────\r\n\r\ntype StyleColors = {\r\n  bg: string;\r\n  text: string;\r\n  elevated: boolean;\r\n};\r\n\r\ntype ColorRoles = ReturnType<typeof useTheme>['colorRoles'];\r\n\r\nfunction getStyleColors(style: BadgeStyle, cr: ColorRoles): StyleColors {\r\n  switch (style) {\r\n    case 'filled':\r\n      return {\r\n        bg: cr.accent.primary.sysPrimary,\r\n        text: cr.accent.primary.sysOnPrimary,\r\n        elevated: false,\r\n      };\r\n    case 'positive':\r\n      return {\r\n        bg: cr.custom.success.sysSuccess,\r\n        text: cr.custom.success.sysOnSuccess,\r\n        elevated: false,\r\n      };\r\n    case 'danger':\r\n      return {\r\n        bg: cr.error.sysError,\r\n        text: cr.error.sysOnError,\r\n        elevated: false,\r\n      };\r\n    case 'elevated':\r\n      return {\r\n        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        text: cr.surface.surface.sysOnSurface,\r\n        elevated: true,\r\n      };\r\n    case 'tonal':\r\n      return {\r\n        bg: cr.surface.surfaceContainer.sysSurfaceContainer,\r\n        text: cr.surface.surface.sysOnSurface,\r\n        elevated: false,\r\n      };\r\n    case 'dot':\r\n      // Container is transparent; the dot itself is sysPrimary\r\n      return {\r\n        bg: 'transparent',\r\n        text: 'transparent',\r\n        elevated: false,\r\n      };\r\n  }\r\n}\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────────\r\n\r\nexport function Badge({\r\n  label,\r\n  size = 'md',\r\n  badgeStyle = 'filled',\r\n  style,\r\n}: BadgeProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n  const sizeTokens = useMemo(\r\n    () => ({\r\n      sm: {\r\n        outerSize: 16,\r\n        paddingH: dim.spacing.padding.sysPadding4,\r\n        fontSize: ts.labelSmall.sysFontSize,\r\n        lineHeight: ts.labelSmall.sysLineHeight,\r\n        letterSpacing: ts.labelSmall.sysTracking,\r\n        dotInner: 6,\r\n      },\r\n      md: {\r\n        outerSize: 20,\r\n        paddingH: dim.spacing.padding.sysPadding8,\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        letterSpacing: ts.labelMedium.sysTracking,\r\n        dotInner: 8,\r\n      },\r\n      lg: {\r\n        outerSize: 24,\r\n        paddingH: dim.spacing.padding.sysPadding8,\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        letterSpacing: ts.labelMedium.sysTracking,\r\n        dotInner: 12,\r\n      },\r\n    }),\r\n    [dim, ts],\r\n  );\r\n\r\n  const s = sizeTokens[size];\r\n  const c = getStyleColors(badgeStyle, cr);\r\n\r\n  // Dot variant — render a solid filled circle inside a transparent wrapper\r\n  if (badgeStyle === 'dot') {\r\n    return (\r\n      <View\r\n        accessible={false}\r\n        style={[\r\n          {\r\n            width: s.outerSize,\r\n            height: s.outerSize,\r\n            borderRadius: s.outerSize / 2,\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n          },\r\n          style,\r\n        ]}\r\n      >\r\n        <View\r\n          style={{\r\n            width: s.dotInner,\r\n            height: s.dotInner,\r\n            borderRadius: s.dotInner / 2,\r\n            backgroundColor: cr.accent.primary.sysPrimary,\r\n          }}\r\n        />\r\n      </View>\r\n    );\r\n  }\r\n\r\n  // Number/text badge — pill that is at minimum a circle, grows wider for\r\n  // longer labels (e.g. \"99+\")\r\n  const displayLabel = label !== undefined ? String(label) : '';\r\n\r\n  return (\r\n    <View\r\n      accessible\r\n      accessibilityLabel={displayLabel ? `${displayLabel} badge` : 'Badge'}\r\n      style={[\r\n        styles.root,\r\n        {\r\n          minWidth: s.outerSize,\r\n          height: s.outerSize,\r\n          borderRadius: s.outerSize / 2,\r\n          paddingHorizontal: s.paddingH,\r\n          backgroundColor: c.bg,\r\n        },\r\n        c.elevated && styles.elevated,\r\n        style,\r\n      ]}\r\n    >\r\n      <Text\r\n        style={{\r\n          color: c.text,\r\n          fontSize: s.fontSize,\r\n          lineHeight: s.lineHeight,\r\n          letterSpacing: s.letterSpacing,\r\n          fontWeight: '500',\r\n          includeFontPadding: false,\r\n          textAlign: 'center',\r\n        }}\r\n        numberOfLines={1}\r\n      >\r\n        {displayLabel}\r\n      </Text>\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  root: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    // overflow visible so elevated shadow renders outside the pill\r\n    overflow: 'visible',\r\n  },\r\n  elevated: {\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 2 },\r\n    shadowOpacity: 0.06,\r\n    shadowRadius: 4,\r\n    elevation: 1,\r\n  },\r\n});\r\n"],"names":["Badge","getStyleColors","style","cr","bg","accent","primary","sysPrimary","text","sysOnPrimary","elevated","custom","success","sysSuccess","sysOnSuccess","error","sysError","sysOnError","surface","surfaceContainer","sysSurfaceContainerLowest","sysOnSurface","sysSurfaceContainer","label","size","badgeStyle","colorRoles","dimensions","dim","typeScale","ts","useTheme","sizeTokens","useMemo","sm","outerSize","paddingH","spacing","padding","sysPadding4","fontSize","labelSmall","sysFontSize","lineHeight","sysLineHeight","letterSpacing","sysTracking","dotInner","md","sysPadding8","labelMedium","lg","s","c","View","accessible","width","height","borderRadius","alignItems","justifyContent","backgroundColor","displayLabel","undefined","String","accessibilityLabel","styles","root","minWidth","paddingHorizontal","Text","color","fontWeight","includeFontPadding","textAlign","numberOfLines","StyleSheet","create","overflow","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation"],"mappings":"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"}

package/src/components/BodyText/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type TextProps } from 'react-native';
+export type BodyVariant = 'large' | 'medium' | 'small' | 'labelLarge' | 'labelMedium' | 'labelSmall';
+export interface BodyTextProps extends TextProps {
+    variant?: BodyVariant;
+    emphasized?: boolean;
+    color?: string;
+}
+export declare function BodyText({ variant, emphasized, color, style, ...rest }: BodyTextProps): React.JSX.Element;