@ankhorage/zora 1.4.9 → 1.4.11

package/dist/patterns/message-bubble/MessageBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/patterns/message-bubble/MessageBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAQpE,SAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,UAAU,GAIX;IACC,IAAI,MAAM,EAAE,IAAI;QAAE,OAAO,MAAM,CAAC,IAAI,CAAC;IACrC,OAAO,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;AACjE,CAAC;AAED,SAAS,cAAc,CAAC,OAAgB;IACtC,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAY,EAAE,EAAE,EAAE,GAAY,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAY,EAAE,EAAE,EAAE,GAAY,EAAE,CAAC;AACnG,CAAC;AAED,SAAS,kBAAkB,CAAC,MAA2B;IACrD,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,WAAW;YACd,OAAO,WAAW,CAAC;QACrB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC;QAClB;YACE,OAAO,MAAM,CAAC;IAClB,CAAC;AACH,CAAC;AAED,SAAS,qBAAqB,CAC5B,MAAoC;IAEpC,OAAO,CACL,MAAM,KAAK,SAAS;QACpB,MAAM,KAAK,MAAM;QACjB,MAAM,KAAK,WAAW;QACtB,MAAM,KAAK,MAAM;QACjB,MAAM,KAAK,QAAQ,CACpB,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,MAAoC;IACzD,IAAI,MAAM,IAAI,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,OAAO,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;AAC7E,CAAC;AAED,SAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAK,GAQN;IACC,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;IAE7F,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO;YACL,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;YAC9D,WAAW;YACX,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC7B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SAC7B,CAAC;IACJ,CAAC;IAED,MAAM,aAAa,GAAG,OAAO;QAC3B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,aAAa;QACvC,CAAC,CAAC,OAAO;YACP,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY;YACtC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO;QACL,EAAE,EACA,aAAa;YACb,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC;QAC/F,WAAW;QACX,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KAC7B,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,MAAM,EACN,UAAU,EACV,OAAO,GAKR;IACC,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,MAAM,CACL,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC1B,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,UAAU,CAAC,CAClC,IAAI,CAAC,CAAC,UAAU,CAAC,CACjB,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAC5C,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACtB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAClB,CACH,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,kBAAkB,EAClB,OAAO,GACY;IACnB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU,CAAC;IAC5C,MAAM,QAAQ,GAAG,SAAS,KAAK,QAAQ,CAAC;IACxC,MAAM,cAAc,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,MAAM,EAAE,IAAI,CAAC;IAChC,MAAM,YAAY,GAAG,MAAM,EAAE,MAAM,CAAC;IACpC,MAAM,aAAa,GAAG,UAAU,IAAI,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,CAAC;IACrE,MAAM,SAAS,GAAG,YAAY,IAAI,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,CAAC;IACnE,MAAM,UAAU,GAAG,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc,IAAI,IAAI,CAAC;IAE/E,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAA0C,EAAE,EAAE;QACpF,MAAM,MAAM,GAAG,mBAAmB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;QAE/F,OAAO,CACL,CAAC,GAAG,CACF,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CACd,WAAW,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAChC,WAAW,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAChC,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CACf,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CACf,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAC7B,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAElE;QAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAC5E;UAAA,CAAC,aAAa,CAAC,CAAC,CAAC,CACf,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CACpD;cAAA,CAAC,UAAU,CACb;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CACd,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CACjF;cAAA,CAAC,IAAI,CACP;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC7D;UAAA,CAAC,UAAU,CAAC,CAAC,CAAC,CACZ,CAAC,MAAM,CACL,KAAK,CAAC,QAAQ,CACd,GAAG,CAAC,IAAI,CACR,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CACtE,IAAI,CAAC,MAAM,CAEX;cAAA,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,CACnB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CACnC;kBAAA,CAAC,SAAS,CACZ;gBAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;cAAA,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CACd,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CACnC;kBAAA,CAAC,IAAI,CACP;gBAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;cAAA,CAAC,cAAc,IAAI,IAAI,CAAC,CAAC,CAAC,CACxB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,SAAS,CACtE;kBAAA,CAAC,cAAc,CACjB;gBAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,aAAa,CAAC,CAAC,CAAC,CACpC,CAAC,UAAU,CACT,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAC3C,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAC7B,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAC9E;IAAA,EAAE,UAAU,CAAC,CACd,CAAC,CAAC,CAAC,CACF,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAC9E,CAAC;IAEF,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CACvC;MAAA,CAAC,MAAM,CACL,KAAK,CAAC,UAAU,CAChB,GAAG,CAAC,GAAG,CACP,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CACtE,IAAI,CAAC,QAAQ,CAEb;QAAA,CAAC,CAAC,UAAU,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC1B,CAAC,GAAG,CACF;YAAA,CAAC,OAAO;gBACN,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,EAAG,CAClF,CAAC,CAAC,CAAC,IAAI,CAAC,CACb;UAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACR;QAAA,CAAC,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACtD;QAAA,CAAC,aAAa,CACd;QAAA,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACpD;QAAA,CAAC,CAAC,UAAU,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACtE;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAChB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAC7F,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import { ButtonBase } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Avatar } from '../../components/avatar';\nimport { Text } from '../../components/text';\nimport { Box, Inline, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type {\n  MessageBubbleAvatar,\n  MessageBubbleDirection,\n  MessageBubbleProps,\n  MessageBubbleStatus,\n} from './types';\n\nfunction resolveAvatarName({\n  avatar,\n  authorName,\n}: {\n  avatar: MessageBubbleAvatar | undefined;\n  authorName: React.ReactNode | undefined;\n}): string | undefined {\n  if (avatar?.name) return avatar.name;\n  return typeof authorName === 'string' ? authorName : undefined;\n}\n\nfunction resolvePadding(compact: boolean) {\n  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };\n}\n\nfunction resolveStatusLabel(status: MessageBubbleStatus): string {\n  switch (status) {\n    case 'sending':\n      return 'Sending';\n    case 'sent':\n      return 'Sent';\n    case 'delivered':\n      return 'Delivered';\n    case 'read':\n      return 'Read';\n    case 'failed':\n      return 'Failed';\n    default:\n      return status;\n  }\n}\n\nfunction isMessageBubbleStatus(\n  status: MessageBubbleProps['status'],\n): status is MessageBubbleStatus {\n  return (\n    status === 'sending' ||\n    status === 'sent' ||\n    status === 'delivered' ||\n    status === 'read' ||\n    status === 'failed'\n  );\n}\n\nfunction resolveStatus(status: MessageBubbleProps['status']) {\n  if (status == null) return null;\n  return isMessageBubbleStatus(status) ? resolveStatusLabel(status) : status;\n}\n\nfunction resolveBubbleStyles({\n  direction,\n  disabled,\n  hovered,\n  pressed,\n  selected,\n  theme,\n}: {\n  direction: MessageBubbleDirection;\n  disabled: boolean;\n  hovered: boolean;\n  pressed: boolean;\n  selected: boolean;\n  theme: ReturnType<typeof useZoraTheme>['theme'];\n}) {\n  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;\n\n  if (direction === 'system') {\n    return {\n      bg: selected ? theme.semantics.neutral.surface : 'transparent',\n      borderColor,\n      borderWidth: selected ? 1 : 0,\n      opacity: disabled ? 0.72 : 1,\n    };\n  }\n\n  const interactiveBg = pressed\n    ? theme.semantics.neutral.surfaceActive\n    : hovered\n      ? theme.semantics.neutral.surfaceHover\n      : undefined;\n\n  return {\n    bg:\n      interactiveBg ??\n      (direction === 'outgoing' ? theme.semantics.neutral.surface : theme.semantics.surface.raised),\n    borderColor,\n    borderWidth: selected ? 1 : 0,\n    opacity: disabled ? 0.72 : 1,\n  };\n}\n\nfunction MessageAvatar({\n  avatar,\n  authorName,\n  compact,\n}: {\n  avatar: MessageBubbleAvatar;\n  authorName: React.ReactNode | undefined;\n  compact: boolean;\n}) {\n  const avatarName = resolveAvatarName({ avatar, authorName });\n\n  return (\n    <Avatar\n      initials={avatar.initials}\n      label={avatar.label ?? avatarName}\n      name={avatarName}\n      shape={avatar.shape}\n      size={avatar.size ?? (compact ? 'xs' : 's')}\n      source={avatar.source}\n      tone={avatar.tone}\n    />\n  );\n}\n\nfunction MessageBubbleInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  direction = 'incoming',\n  text,\n  children,\n  author,\n  timestamp,\n  meta,\n  status,\n  leading,\n  trailing,\n  footer,\n  selected = false,\n  disabled = false,\n  compact = false,\n  accessibilityLabel,\n  onPress,\n}: MessageBubbleProps) {\n  const { theme } = useZoraTheme();\n  const padding = resolvePadding(compact);\n  const isInteractive = Boolean(onPress);\n  const isOutgoing = direction === 'outgoing';\n  const isSystem = direction === 'system';\n  const renderedStatus = resolveStatus(status);\n  const authorName = author?.name;\n  const authorAvatar = author?.avatar;\n  const hasAuthorName = authorName != null && !isOutgoing && !isSystem;\n  const hasAvatar = authorAvatar != null && !isOutgoing && !isSystem;\n  const hasMetaRow = timestamp != null || meta != null || renderedStatus != null;\n\n  const renderBubble = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {\n    const styles = resolveBubbleStyles({ direction, disabled, hovered, pressed, selected, theme });\n\n    return (\n      <Box\n        bg={styles.bg}\n        borderColor={styles.borderColor}\n        borderWidth={styles.borderWidth}\n        px={padding.px}\n        py={padding.py}\n        radius={isSystem ? 'm' : 'l'}\n        style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}\n      >\n        <Stack align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>\n          {hasAuthorName ? (\n            <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n              {authorName}\n            </Text>\n          ) : null}\n          {text != null ? (\n            <Text align={isSystem ? 'center' : undefined} tone={disabled ? 'muted' : 'default'}>\n              {text}\n            </Text>\n          ) : null}\n          {children != null ? <Box width=\"100%\">{children}</Box> : null}\n          {hasMetaRow ? (\n            <Inline\n              align=\"center\"\n              gap=\"xs\"\n              justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}\n              wrap=\"wrap\"\n            >\n              {timestamp != null ? (\n                <Text tone=\"subtle\" variant=\"caption\">\n                  {timestamp}\n                </Text>\n              ) : null}\n              {meta != null ? (\n                <Text tone=\"subtle\" variant=\"caption\">\n                  {meta}\n                </Text>\n              ) : null}\n              {renderedStatus != null ? (\n                <Text tone={status === 'failed' ? 'danger' : 'subtle'} variant=\"caption\">\n                  {renderedStatus}\n                </Text>\n              ) : null}\n            </Inline>\n          ) : null}\n        </Stack>\n      </Box>\n    );\n  };\n\n  const bubbleContent = isInteractive ? (\n    <ButtonBase\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled, selected }}\n      disabled={disabled}\n      onPress={onPress}\n      radius={isSystem ? 'm' : 'l'}\n      testID={testID}\n    >\n      {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}\n    </ButtonBase>\n  ) : (\n    <Box testID={testID}>{renderBubble({ pressed: false, hovered: false })}</Box>\n  );\n\n  return (\n    <Stack gap=\"xs\" style={{ width: '100%' }}>\n      <Inline\n        align=\"flex-end\"\n        gap=\"s\"\n        justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'}\n        wrap=\"nowrap\"\n      >\n        {!isOutgoing && !isSystem ? (\n          <Box>\n            {leading ??\n              (hasAvatar ? (\n                <MessageAvatar avatar={authorAvatar} authorName={authorName} compact={compact} />\n              ) : null)}\n          </Box>\n        ) : null}\n        {isOutgoing && trailing ? <Box>{trailing}</Box> : null}\n        {bubbleContent}\n        {isOutgoing && leading ? <Box>{leading}</Box> : null}\n        {!isOutgoing && !isSystem && trailing ? <Box>{trailing}</Box> : null}\n      </Inline>\n      {footer != null ? (\n        <Box alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>{footer}</Box>\n      ) : null}\n    </Stack>\n  );\n}\n\nexport const MessageBubble = withZoraThemeScope(MessageBubbleInner);\n"]}

package/dist/patterns/message-bubble/index.d.ts

@@ -0,0 +1,3 @@
+export { MessageBubble } from './MessageBubble';
+export type { MessageBubbleAuthor, MessageBubbleAvatar, MessageBubbleDirection, MessageBubbleProps, MessageBubbleStatus, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/message-bubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/message-bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,SAAS,CAAC"}

package/dist/patterns/message-bubble/index.js

@@ -0,0 +1,2 @@
+export { MessageBubble } from './MessageBubble';
+//# sourceMappingURL=index.js.map

package/dist/patterns/message-bubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/message-bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { MessageBubble } from './MessageBubble';\nexport type {\n  MessageBubbleAuthor,\n  MessageBubbleAvatar,\n  MessageBubbleDirection,\n  MessageBubbleProps,\n  MessageBubbleStatus,\n} from './types';\n"]}

package/dist/patterns/message-bubble/meta.d.ts

@@ -0,0 +1,67 @@
+export declare const messageBubbleMeta: {
+    readonly name: "MessageBubble";
+    readonly category: "pattern";
+    readonly description: "Chat/message bubble with direction, author, text, meta, and delivery status presentation.";
+    readonly directManifestNode: true;
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble"];
+    readonly blueprint: {
+        readonly label: "Message bubble";
+        readonly icon: {
+            readonly name: "chatbubble-outline";
+        };
+        readonly defaultProps: {
+            readonly direction: "incoming";
+            readonly text: "Can you review the latest message pattern?";
+            readonly timestamp: "10:41";
+        };
+    };
+    readonly props: {
+        readonly direction: {
+            readonly type: "enum";
+            readonly category: "Content";
+            readonly label: "Direction";
+            readonly enum: readonly ["incoming", "outgoing", "system"];
+            readonly default: "incoming";
+        };
+        readonly text: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Text";
+        };
+        readonly timestamp: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Timestamp";
+        };
+        readonly meta: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Meta";
+        };
+        readonly status: {
+            readonly type: "enum";
+            readonly category: "Content";
+            readonly label: "Status";
+            readonly enum: readonly ["sending", "sent", "delivered", "read", "failed"];
+        };
+        readonly selected: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Selected";
+            readonly default: false;
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Disabled";
+            readonly default: false;
+        };
+        readonly compact: {
+            readonly type: "boolean";
+            readonly category: "Layout";
+            readonly label: "Compact";
+            readonly default: false;
+        };
+    };
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/patterns/message-bubble/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/message-bubble/meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEQ,CAAC"}

package/dist/patterns/message-bubble/meta.js

@@ -0,0 +1,66 @@
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+export const messageBubbleMeta = {
+    name: 'MessageBubble',
+    category: 'pattern',
+    description: 'Chat/message bubble with direction, author, text, meta, and delivery status presentation.',
+    directManifestNode: true,
+    allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+    blueprint: {
+        label: 'Message bubble',
+        icon: { name: 'chatbubble-outline' },
+        defaultProps: {
+            direction: 'incoming',
+            text: 'Can you review the latest message pattern?',
+            timestamp: '10:41',
+        },
+    },
+    props: {
+        direction: {
+            type: 'enum',
+            category: 'Content',
+            label: 'Direction',
+            enum: ['incoming', 'outgoing', 'system'],
+            default: 'incoming',
+        },
+        text: {
+            type: 'string',
+            category: 'Content',
+            label: 'Text',
+        },
+        timestamp: {
+            type: 'string',
+            category: 'Content',
+            label: 'Timestamp',
+        },
+        meta: {
+            type: 'string',
+            category: 'Content',
+            label: 'Meta',
+        },
+        status: {
+            type: 'enum',
+            category: 'Content',
+            label: 'Status',
+            enum: ['sending', 'sent', 'delivered', 'read', 'failed'],
+        },
+        selected: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Selected',
+            default: false,
+        },
+        disabled: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Disabled',
+            default: false,
+        },
+        compact: {
+            type: 'boolean',
+            category: 'Layout',
+            label: 'Compact',
+            default: false,
+        },
+    },
+};
+//# sourceMappingURL=meta.js.map

package/dist/patterns/message-bubble/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/patterns/message-bubble/meta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE,SAAS;IACnB,WAAW,EACT,2FAA2F;IAC7F,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,0BAA0B,CAAC;IAChD,SAAS,EAAE;QACT,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE;QACpC,YAAY,EAAE;YACZ,SAAS,EAAE,UAAU;YACrB,IAAI,EAAE,4CAA4C;YAClD,SAAS,EAAE,OAAO;SACnB;KACF;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC;YACxC,OAAO,EAAE,UAAU;SACpB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,MAAM;SACd;QACD,SAAS,EAAE;YACT,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,WAAW;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,MAAM;SACd;QACD,MAAM,EAAE;YACN,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC;SACzD;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,KAAK;SACf;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,KAAK;SACf;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,KAAK;SACf;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\nimport { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';\n\nexport const messageBubbleMeta = {\n  name: 'MessageBubble',\n  category: 'pattern',\n  description:\n    'Chat/message bubble with direction, author, text, meta, and delivery status presentation.',\n  directManifestNode: true,\n  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],\n  blueprint: {\n    label: 'Message bubble',\n    icon: { name: 'chatbubble-outline' },\n    defaultProps: {\n      direction: 'incoming',\n      text: 'Can you review the latest message pattern?',\n      timestamp: '10:41',\n    },\n  },\n  props: {\n    direction: {\n      type: 'enum',\n      category: 'Content',\n      label: 'Direction',\n      enum: ['incoming', 'outgoing', 'system'],\n      default: 'incoming',\n    },\n    text: {\n      type: 'string',\n      category: 'Content',\n      label: 'Text',\n    },\n    timestamp: {\n      type: 'string',\n      category: 'Content',\n      label: 'Timestamp',\n    },\n    meta: {\n      type: 'string',\n      category: 'Content',\n      label: 'Meta',\n    },\n    status: {\n      type: 'enum',\n      category: 'Content',\n      label: 'Status',\n      enum: ['sending', 'sent', 'delivered', 'read', 'failed'],\n    },\n    selected: {\n      type: 'boolean',\n      category: 'State',\n      label: 'Selected',\n      default: false,\n    },\n    disabled: {\n      type: 'boolean',\n      category: 'State',\n      label: 'Disabled',\n      default: false,\n    },\n    compact: {\n      type: 'boolean',\n      category: 'Layout',\n      label: 'Compact',\n      default: false,\n    },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/patterns/message-bubble/types.d.ts

@@ -0,0 +1,40 @@
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import type { AvatarShape, AvatarSize } from '../../components/avatar';
+import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export type MessageBubbleDirection = 'incoming' | 'outgoing' | 'system';
+export type MessageBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+type MessageBubbleStatusContent = MessageBubbleStatus | Exclude<React.ReactNode, string>;
+export interface MessageBubbleAvatar {
+    source?: ImageSourcePropType;
+    name?: string;
+    initials?: string;
+    label?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    tone?: ZoraTone;
+}
+export interface MessageBubbleAuthor {
+    name?: React.ReactNode;
+    avatar?: MessageBubbleAvatar;
+}
+export interface MessageBubbleProps extends ZoraBaseProps {
+    direction?: MessageBubbleDirection;
+    text?: React.ReactNode;
+    children?: React.ReactNode;
+    author?: MessageBubbleAuthor;
+    timestamp?: React.ReactNode;
+    meta?: React.ReactNode;
+    status?: MessageBubbleStatusContent;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    footer?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    compact?: boolean;
+    accessibilityLabel?: string;
+    onPress?: () => void;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/message-bubble/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/message-bubble/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AACxE,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;AACvF,KAAK,0BAA0B,GAAG,mBAAmB,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAEzF,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/patterns/message-bubble/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/patterns/message-bubble/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/message-bubble/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { ImageSourcePropType } from 'react-native';\n\nimport type { AvatarShape, AvatarSize } from '../../components/avatar';\nimport type { ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type MessageBubbleDirection = 'incoming' | 'outgoing' | 'system';\nexport type MessageBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';\ntype MessageBubbleStatusContent = MessageBubbleStatus | Exclude<React.ReactNode, string>;\n\nexport interface MessageBubbleAvatar {\n  source?: ImageSourcePropType;\n  name?: string;\n  initials?: string;\n  label?: string;\n  size?: AvatarSize;\n  shape?: AvatarShape;\n  tone?: ZoraTone;\n}\n\nexport interface MessageBubbleAuthor {\n  name?: React.ReactNode;\n  avatar?: MessageBubbleAvatar;\n}\n\nexport interface MessageBubbleProps extends ZoraBaseProps {\n  direction?: MessageBubbleDirection;\n  text?: React.ReactNode;\n  children?: React.ReactNode;\n  author?: MessageBubbleAuthor;\n  timestamp?: React.ReactNode;\n  meta?: React.ReactNode;\n  status?: MessageBubbleStatusContent;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  footer?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n  compact?: boolean;\n  accessibilityLabel?: string;\n  onPress?: () => void;\n}\n"]}

package/dist/patterns/notice/meta.d.ts

@@ -2,7 +2,7 @@ export declare const noticeMeta: {
     readonly name: "Notice";
     readonly category: "pattern";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble"];
     readonly blueprint: {
         readonly label: "Notice";
         readonly defaultProps: {

package/dist/patterns/panel/meta.d.ts

@@ -2,7 +2,7 @@ export declare const panelMeta: {
     readonly name: "Panel";
     readonly category: "pattern";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble"];
     readonly blueprint: {
         readonly label: "Panel";
         readonly defaultProps: {

package/dist/patterns/post-card/meta.d.ts

@@ -3,7 +3,7 @@ export declare const postCardMeta: {
     readonly category: "pattern";
     readonly description: "Social/content post card with author identity, body, media, actions, and comment previews.";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble"];
     readonly blueprint: {
         readonly label: "Post card";
         readonly icon: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "1.4.9",
+  "version": "1.4.11",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -43,9 +43,9 @@
     }
   },
   "dependencies": {
-    "@ankhorage/color-theory": "^0.0.4",
-    "@ankhorage/contracts": "^1.2.0",
-    "@ankhorage/surface": "^1.3.0"
+    "@ankhorage/color-theory": "^0.0.7",
+    "@ankhorage/contracts": "^1.3.1",
+    "@ankhorage/surface": "^1.3.1"
   },
   "files": [
     "dist",
@@ -83,7 +83,7 @@
     "version-packages": "changeset version"
   },
   "devDependencies": {
-    "@ankhorage/devtools": "^1.0.5",
+    "@ankhorage/devtools": "^1.0.6",
     "@changesets/cli": "^2.31.0",
     "@expo/vector-icons": "^15.1.1",
     "@react-native-picker/picker": "^2.11.4",

package/src/index.ts

@@ -203,6 +203,14 @@ export type {
   ListSectionProps,
 } from './patterns/list';
 export { List, ListRow, ListSection } from './patterns/list';
+export type {
+  MessageBubbleAuthor,
+  MessageBubbleAvatar,
+  MessageBubbleDirection,
+  MessageBubbleProps,
+  MessageBubbleStatus,
+} from './patterns/message-bubble';
+export { MessageBubble } from './patterns/message-bubble';
 export type { NoticeProps } from './patterns/notice';
 export { Notice } from './patterns/notice';
 export type { PanelProps } from './patterns/panel';

package/src/metadata/allowedChildren.ts

@@ -18,6 +18,7 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'SettingsRow',
   'PostCard',
   'ChatListItem',
+  'MessageBubble',
 ] as const;
 
 export const PAGE_SECTION_ALLOWED_CHILDREN = [...CONTAINER_ALLOWED_CHILDREN] as const;

package/src/metadata/componentMeta.test.ts

@@ -153,6 +153,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Panel',
       'Notice',
       'PostCard',
+      'MessageBubble',
       'Box',
       'Stack',
       'Grid',

package/src/metadata/componentMeta.ts

@@ -54,6 +54,7 @@ import { imagePreviewMeta } from '../patterns/image-preview/meta';
 import { imageUploadFieldMeta } from '../patterns/image-upload-field/meta';
 import { inspectorFieldMeta } from '../patterns/inspector-field/meta';
 import { listMeta, listRowMeta, listSectionMeta } from '../patterns/list/meta';
+import { messageBubbleMeta } from '../patterns/message-bubble/meta';
 import { noticeMeta } from '../patterns/notice/meta';
 import { panelMeta } from '../patterns/panel/meta';
 import { postCardMeta } from '../patterns/post-card/meta';
@@ -133,6 +134,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   List: listMeta,
   ListRow: listRowMeta,
   ListSection: listSectionMeta,
+  MessageBubble: messageBubbleMeta,
   Notice: noticeMeta,
   Panel: panelMeta,
   PostCard: postCardMeta,

package/src/patterns/message-bubble/MessageBubble.tsx

@@ -0,0 +1,261 @@
+import { ButtonBase } from '@ankhorage/surface';
+import React from 'react';
+
+import { Avatar } from '../../components/avatar';
+import { Text } from '../../components/text';
+import { Box, Inline, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type {
+  MessageBubbleAvatar,
+  MessageBubbleDirection,
+  MessageBubbleProps,
+  MessageBubbleStatus,
+} from './types';
+
+function resolveAvatarName({
+  avatar,
+  authorName,
+}: {
+  avatar: MessageBubbleAvatar | undefined;
+  authorName: React.ReactNode | undefined;
+}): string | undefined {
+  if (avatar?.name) return avatar.name;
+  return typeof authorName === 'string' ? authorName : undefined;
+}
+
+function resolvePadding(compact: boolean) {
+  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };
+}
+
+function resolveStatusLabel(status: MessageBubbleStatus): string {
+  switch (status) {
+    case 'sending':
+      return 'Sending';
+    case 'sent':
+      return 'Sent';
+    case 'delivered':
+      return 'Delivered';
+    case 'read':
+      return 'Read';
+    case 'failed':
+      return 'Failed';
+    default:
+      return status;
+  }
+}
+
+function isMessageBubbleStatus(
+  status: MessageBubbleProps['status'],
+): status is MessageBubbleStatus {
+  return (
+    status === 'sending' ||
+    status === 'sent' ||
+    status === 'delivered' ||
+    status === 'read' ||
+    status === 'failed'
+  );
+}
+
+function resolveStatus(status: MessageBubbleProps['status']) {
+  if (status == null) return null;
+  return isMessageBubbleStatus(status) ? resolveStatusLabel(status) : status;
+}
+
+function resolveBubbleStyles({
+  direction,
+  disabled,
+  hovered,
+  pressed,
+  selected,
+  theme,
+}: {
+  direction: MessageBubbleDirection;
+  disabled: boolean;
+  hovered: boolean;
+  pressed: boolean;
+  selected: boolean;
+  theme: ReturnType<typeof useZoraTheme>['theme'];
+}) {
+  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;
+
+  if (direction === 'system') {
+    return {
+      bg: selected ? theme.semantics.neutral.surface : 'transparent',
+      borderColor,
+      borderWidth: selected ? 1 : 0,
+      opacity: disabled ? 0.72 : 1,
+    };
+  }
+
+  const interactiveBg = pressed
+    ? theme.semantics.neutral.surfaceActive
+    : hovered
+      ? theme.semantics.neutral.surfaceHover
+      : undefined;
+
+  return {
+    bg:
+      interactiveBg ??
+      (direction === 'outgoing' ? theme.semantics.neutral.surface : theme.semantics.surface.raised),
+    borderColor,
+    borderWidth: selected ? 1 : 0,
+    opacity: disabled ? 0.72 : 1,
+  };
+}
+
+function MessageAvatar({
+  avatar,
+  authorName,
+  compact,
+}: {
+  avatar: MessageBubbleAvatar;
+  authorName: React.ReactNode | undefined;
+  compact: boolean;
+}) {
+  const avatarName = resolveAvatarName({ avatar, authorName });
+
+  return (
+    <Avatar
+      initials={avatar.initials}
+      label={avatar.label ?? avatarName}
+      name={avatarName}
+      shape={avatar.shape}
+      size={avatar.size ?? (compact ? 'xs' : 's')}
+      source={avatar.source}
+      tone={avatar.tone}
+    />
+  );
+}
+
+function MessageBubbleInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  direction = 'incoming',
+  text,
+  children,
+  author,
+  timestamp,
+  meta,
+  status,
+  leading,
+  trailing,
+  footer,
+  selected = false,
+  disabled = false,
+  compact = false,
+  accessibilityLabel,
+  onPress,
+}: MessageBubbleProps) {
+  const { theme } = useZoraTheme();
+  const padding = resolvePadding(compact);
+  const isInteractive = Boolean(onPress);
+  const isOutgoing = direction === 'outgoing';
+  const isSystem = direction === 'system';
+  const renderedStatus = resolveStatus(status);
+  const authorName = author?.name;
+  const authorAvatar = author?.avatar;
+  const hasAuthorName = authorName != null && !isOutgoing && !isSystem;
+  const hasAvatar = authorAvatar != null && !isOutgoing && !isSystem;
+  const hasMetaRow = timestamp != null || meta != null || renderedStatus != null;
+
+  const renderBubble = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {
+    const styles = resolveBubbleStyles({ direction, disabled, hovered, pressed, selected, theme });
+
+    return (
+      <Box
+        bg={styles.bg}
+        borderColor={styles.borderColor}
+        borderWidth={styles.borderWidth}
+        px={padding.px}
+        py={padding.py}
+        radius={isSystem ? 'm' : 'l'}
+        style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}
+      >
+        <Stack align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>
+          {hasAuthorName ? (
+            <Text tone="muted" variant="caption" weight="semiBold">
+              {authorName}
+            </Text>
+          ) : null}
+          {text != null ? (
+            <Text align={isSystem ? 'center' : undefined} tone={disabled ? 'muted' : 'default'}>
+              {text}
+            </Text>
+          ) : null}
+          {children != null ? <Box width="100%">{children}</Box> : null}
+          {hasMetaRow ? (
+            <Inline
+              align="center"
+              gap="xs"
+              justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}
+              wrap="wrap"
+            >
+              {timestamp != null ? (
+                <Text tone="subtle" variant="caption">
+                  {timestamp}
+                </Text>
+              ) : null}
+              {meta != null ? (
+                <Text tone="subtle" variant="caption">
+                  {meta}
+                </Text>
+              ) : null}
+              {renderedStatus != null ? (
+                <Text tone={status === 'failed' ? 'danger' : 'subtle'} variant="caption">
+                  {renderedStatus}
+                </Text>
+              ) : null}
+            </Inline>
+          ) : null}
+        </Stack>
+      </Box>
+    );
+  };
+
+  const bubbleContent = isInteractive ? (
+    <ButtonBase
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      onPress={onPress}
+      radius={isSystem ? 'm' : 'l'}
+      testID={testID}
+    >
+      {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}
+    </ButtonBase>
+  ) : (
+    <Box testID={testID}>{renderBubble({ pressed: false, hovered: false })}</Box>
+  );
+
+  return (
+    <Stack gap="xs" style={{ width: '100%' }}>
+      <Inline
+        align="flex-end"
+        gap="s"
+        justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'}
+        wrap="nowrap"
+      >
+        {!isOutgoing && !isSystem ? (
+          <Box>
+            {leading ??
+              (hasAvatar ? (
+                <MessageAvatar avatar={authorAvatar} authorName={authorName} compact={compact} />
+              ) : null)}
+          </Box>
+        ) : null}
+        {isOutgoing && trailing ? <Box>{trailing}</Box> : null}
+        {bubbleContent}
+        {isOutgoing && leading ? <Box>{leading}</Box> : null}
+        {!isOutgoing && !isSystem && trailing ? <Box>{trailing}</Box> : null}
+      </Inline>
+      {footer != null ? (
+        <Box alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>{footer}</Box>
+      ) : null}
+    </Stack>
+  );
+}
+
+export const MessageBubble = withZoraThemeScope(MessageBubbleInner);

package/src/patterns/message-bubble/index.ts

@@ -0,0 +1,8 @@
+export { MessageBubble } from './MessageBubble';
+export type {
+  MessageBubbleAuthor,
+  MessageBubbleAvatar,
+  MessageBubbleDirection,
+  MessageBubbleProps,
+  MessageBubbleStatus,
+} from './types';