@ankhorage/zora 1.4.9 → 1.4.11

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

@@ -0,0 +1,68 @@
+import type { ZoraComponentMeta } from '../../metadata';
+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,
+    },
+  },
+} as const satisfies ZoraComponentMeta;

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

@@ -0,0 +1,43 @@
+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;
+}