@helpwave/hightide-native 0.0.7 → 0.1.0

package/src/theme/resolvers/button.ts

@@ -1,89 +1,57 @@
+import { toContainerStyle } from '../adapters/container-adapter'
+import { toIconStyle } from '../adapters/icon-style-adapter'
+import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
-  TextStyle,
-  ViewStyle
-} from 'react-native'
-
-import {
-  componentLayouts,
-  fontWeights
-} from '@helpwave/hightide-design/tokens'
-import type {
-  HightideThemeTokens as DesignTokensTheme,
-  ElementSize
-} from '@helpwave/hightide-design/types'
-
-import {
-  isOutlineColoringStyle,
-  resolveColoringStyles
-} from './coloring'
-import type { HightideSemanticColors } from '../types/color'
-import type {
+  ButtonIconStyle,
   ButtonState,
-  ButtonTheme
+  ButtonStyle,
+  ButtonTextStyle,
+  ButtonThemeResolvers
 } from '../types/components/button'
-import type { HightideComponentThemes } from '../types/components/hightide'
-import { createStyleResolver } from '../types/resolver'
-
-const buttonFontSizes: Record<ElementSize, number> = {
-  xs: 12,
-  sm: 14,
-  md: 14,
-  lg: 18,
-}
-
-export type CreateButtonThemeOptions = {
-  semantic: HightideSemanticColors,
-  coloring: HightideComponentThemes['coloring'],
-}
-
-export const createButtonTheme = ({
-  semantic,
-  coloring,
-}: CreateButtonThemeOptions): ButtonTheme => {
-  const resolveState = (state: ButtonState) => {
-    const size = state.size ?? 'md'
-    const color = state.color ?? 'primary'
-    const coloringStyle = state.coloringStyle ?? 'solid'
-    const tokens = coloring[color]
-    const resolved = resolveColoringStyles(tokens, coloringStyle, semantic, state)
-    const padding = componentLayouts.button[size]
-    const sizing = componentLayouts.element[size]
-    const outlinePadding = isOutlineColoringStyle(coloringStyle)
-
-    const button: ViewStyle = {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: resolved.backgroundColor,
-      borderColor: resolved.borderColor,
-      borderWidth: resolved.borderWidth,
-      paddingVertical: outlinePadding ? padding.paddingYOutline : padding.paddingY,
-      paddingHorizontal: outlinePadding ? padding.paddingXOutline : padding.paddingX,
-      gap: padding.gap,
-      minWidth: padding.minWidth,
-      minHeight: sizing.height,
-      borderRadius: padding.borderRadius,
-      opacity: state.isDisabled ? 0.6 : 1,
-    }
-
-    const text: TextStyle = {
-      color: resolved.color,
-      fontSize: buttonFontSizes[size],
-      fontWeight: fontWeights.semibold,
-    }
-
-    return { button, text }
-  }
+import {
+  createStyleResolver,
+  createValueResolver,
+  toPressableInteractionState,
+  type ComponentThemeResolver
+} from '../types/resolver'
+
+export const toButtonThemeResolvers: ComponentThemeResolver<ButtonThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: ButtonState) => componentTokens.button({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      size: state.size,
+      color: state.color,
+      variant: state.variant,
+    },
+    state: toPressableInteractionState(state),
+  })
 
   return {
-    button: createStyleResolver((state) => resolveState(state).button),
-    text: createStyleResolver((state) => resolveState(state).text),
+    container: createStyleResolver((state: ButtonState): ButtonStyle => ({
+      ...toContainerStyle(resolve(state).container),
+      alignSelf: 'flex-start',
+    })),
+    stateLayer: createStyleResolver((state: ButtonState): ButtonStyle => {
+      const tokens = resolve(state)
+      return {
+        ...toContainerStyle(tokens.stateLayer),
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      }
+    }),
+    icon: createValueResolver((state: ButtonState): ButtonIconStyle => (
+      toIconStyle(resolve(state).icon)
+    )),
+    text: createStyleResolver((state: ButtonState): ButtonTextStyle => (
+      toTextStyle(resolve(state).text)
+    )),
   }
 }
-
-export const createButtonThemeFromDesign = (theme: DesignTokensTheme): ButtonTheme => {
-  return createButtonTheme({
-    semantic: theme.semanticColors,
-    coloring: theme.coloring as HightideComponentThemes['coloring'],
-  })
-}

package/src/theme/resolvers/card.ts

@@ -0,0 +1,27 @@
+import { toContainerStyle } from '../adapters/container-adapter'
+import type {
+  CardStyle,
+  CardThemeResolvers
+} from '../types/components/card'
+import {
+  createSimpleStyleResolver,
+  type ComponentThemeResolver
+} from '../types/resolver'
+
+export const toCardThemeResolvers: ComponentThemeResolver<CardThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolveCard = () => componentTokens.card({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+  })
+
+  return {
+    container: createSimpleStyleResolver((): CardStyle => ({
+      ...toContainerStyle(resolveCard()),
+      overflow: 'hidden',
+    })),
+  }
+}

package/src/theme/resolvers/chat/attachment-message-bubble.ts

@@ -0,0 +1,163 @@
+import type {
+  ChatMessageDirection,
+  ContainerTokens,
+  IconTokens,
+  TextStyleTokens
+} from '@helpwave/hightide-design/component-token-resolvers'
+
+import { toContainerStyle } from '../../adapters/container-adapter'
+import { toIconStyle } from '../../adapters/icon-style-adapter'
+import { toTextStyle } from '../../adapters/text-style-adapter'
+import type {
+  ChatAttachmentMessageBubbleDownloadIconContainerStyle,
+  ChatAttachmentMessageBubbleDownloadIconStyle,
+  ChatAttachmentMessageBubbleFileIconContainerStyle,
+  ChatAttachmentMessageBubbleFileIconStyle,
+  ChatAttachmentMessageBubbleFileMetadataTextStyle,
+  ChatAttachmentMessageBubbleFileNameTextStyle,
+  ChatAttachmentMessageBubbleState,
+  ChatAttachmentMessageBubbleThemeResolvers,
+  ChatMessageBubbleBodyStyle,
+  ChatMessageBubbleBodyTextStyle,
+  ChatMessageBubbleContainerStyle,
+  ChatMessageBubbleMetaDataContainerStyle,
+  ChatMessageBubbleMetaDataIconStyle,
+  ChatMessageBubbleMetaDataStatusContainerStyle,
+  ChatMessageBubbleMetaDataTextStyle,
+  PressableContainerStyle,
+  PressableState,
+  PressableStateLayerStyle,
+  PressableTextStyle
+} from '../../types/components/chat'
+import {
+  createStyleResolver,
+  createValueResolver,
+  toPressableInteractionState,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+const toOptionalContainerStyle = (tokens?: ContainerTokens): ChatMessageBubbleContainerStyle => (
+  tokens === undefined ? {} : toContainerStyle(tokens)
+)
+
+const toOptionalTextStyle = (tokens?: TextStyleTokens): ChatMessageBubbleBodyTextStyle => (
+  tokens === undefined ? {} : toTextStyle(tokens)
+)
+
+const toOptionalIconStyle = (tokens?: IconTokens): ChatMessageBubbleMetaDataIconStyle => (
+  tokens === undefined ? {} : toIconStyle(tokens)
+)
+
+export const toChatAttachmentMessageBubbleThemeResolvers: ComponentThemeResolver<
+  ChatAttachmentMessageBubbleThemeResolvers
+> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (direction?: ChatMessageDirection) => componentTokens.chat.attachmentMessageBubble({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    config: { direction },
+  })
+
+  return {
+    chatMessageBubbleOverrides: {
+      container: createStyleResolver((state: ChatAttachmentMessageBubbleState): ChatMessageBubbleContainerStyle => (
+        toOptionalContainerStyle(resolve(state.direction).chatMessageBubbleOverrides.container)
+      )),
+      body: createStyleResolver((state: ChatAttachmentMessageBubbleState): ChatMessageBubbleBodyStyle => (
+        toOptionalContainerStyle(resolve(state.direction).chatMessageBubbleOverrides.body)
+      )),
+      bodyText: createStyleResolver((state: ChatAttachmentMessageBubbleState): ChatMessageBubbleBodyTextStyle => (
+        toOptionalTextStyle(resolve(state.direction).chatMessageBubbleOverrides.bodyText)
+      )),
+      metaDataContainer: createStyleResolver((
+        state: ChatAttachmentMessageBubbleState
+      ): ChatMessageBubbleMetaDataContainerStyle => (
+        toOptionalContainerStyle(resolve(state.direction).chatMessageBubbleOverrides.metaDataContainer)
+      )),
+      metaDataStatusContainer: createStyleResolver((
+        state: ChatAttachmentMessageBubbleState
+      ): ChatMessageBubbleMetaDataStatusContainerStyle => (
+        toOptionalContainerStyle(resolve(state.direction).chatMessageBubbleOverrides.metaDataStatusContainer)
+      )),
+      metaDataText: createStyleResolver((
+        state: ChatAttachmentMessageBubbleState
+      ): ChatMessageBubbleMetaDataTextStyle => (
+        toOptionalTextStyle(resolve(state.direction).chatMessageBubbleOverrides.metaDataText)
+      )),
+      metaDataIcon: createValueResolver((
+        state: ChatAttachmentMessageBubbleState
+      ): ChatMessageBubbleMetaDataIconStyle => (
+        toOptionalIconStyle(resolve(state.direction).chatMessageBubbleOverrides.metaDataIcon)
+      )),
+    },
+    contentContainer: createValueResolver((state: ChatAttachmentMessageBubbleState) => {
+      const contentContainer = resolve(state.direction).contentContainer
+
+      const resolvePressable = (pressableState: PressableState) => componentTokens.pressable({
+        themeTokens,
+        semanticResolvers: semanticTokens,
+        overrides: {
+          size: contentContainer.config.size,
+          color: contentContainer.config.color,
+          coloringStyle: contentContainer.config.coloringStyle,
+          coloringColorVariant: contentContainer.config.coloringColorVariant,
+          hasAdditionalHorizontalPadding: contentContainer.config.hasAdditionalHorizontalPadding,
+        },
+        state: toPressableInteractionState(pressableState),
+      })
+
+      return {
+        container: createStyleResolver((pressableState: PressableState): PressableContainerStyle => ({
+          ...toContainerStyle(resolvePressable(pressableState).container),
+          ...toOptionalContainerStyle(contentContainer.container),
+        })),
+        stateLayer: createStyleResolver((pressableState: PressableState): PressableStateLayerStyle => ({
+          ...toContainerStyle(resolvePressable(pressableState).stateLayer),
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          ...toOptionalContainerStyle(contentContainer.stateLayer),
+        })),
+        text: createStyleResolver((pressableState: PressableState): PressableTextStyle => ({
+          ...toTextStyle(resolvePressable(pressableState).text),
+          ...toOptionalTextStyle(contentContainer.text),
+        })),
+      }
+    }),
+    fileIconContainer: createStyleResolver((
+      state: ChatAttachmentMessageBubbleState
+    ): ChatAttachmentMessageBubbleFileIconContainerStyle => (
+      toContainerStyle(resolve(state.direction).fileIconContainer)
+    )),
+    fileIcon: createValueResolver((
+      state: ChatAttachmentMessageBubbleState
+    ): ChatAttachmentMessageBubbleFileIconStyle => (
+      toIconStyle(resolve(state.direction).fileIcon)
+    )),
+    downloadIconContainer: createStyleResolver((
+      state: ChatAttachmentMessageBubbleState
+    ): ChatAttachmentMessageBubbleDownloadIconContainerStyle => (
+      toContainerStyle(resolve(state.direction).downloadIconContainer)
+    )),
+    downloadIcon: createValueResolver((
+      state: ChatAttachmentMessageBubbleState
+    ): ChatAttachmentMessageBubbleDownloadIconStyle => (
+      toIconStyle(resolve(state.direction).downloadIcon)
+    )),
+    fileNameText: createStyleResolver((
+      state: ChatAttachmentMessageBubbleState
+    ): ChatAttachmentMessageBubbleFileNameTextStyle => (
+      toTextStyle(resolve(state.direction).fileNameText)
+    )),
+    fileMetadataText: createStyleResolver((
+      state: ChatAttachmentMessageBubbleState
+    ): ChatAttachmentMessageBubbleFileMetadataTextStyle => (
+      toTextStyle(resolve(state.direction).fileMetadataText)
+    )),
+  }
+}

package/src/theme/resolvers/chat/chat-theme.ts

@@ -0,0 +1,69 @@
+import type { ChatThemeResolvers } from '../../types/components/chat'
+import type { ComponentThemeResolver } from '../../types/resolver'
+import { toChatAttachmentMessageBubbleThemeResolvers } from './attachment-message-bubble'
+import { toChatConversationListThemeResolvers } from './conversation-list'
+import { toChatConversationRowThemeResolvers } from './conversation-row'
+import { toChatDateDividerThemeResolvers } from './date-divider'
+import { toChatMessageBubbleThemeResolvers } from './message-bubble'
+import { toChatMessageComposerThemeResolvers } from './message-composer'
+import { toChatMessageListThemeResolvers } from './message-list'
+import { toChatQuickReplyChipThemeResolvers } from './quick-reply-chip'
+import { toChatSystemLineThemeResolvers } from './system-line'
+import { toChatThreadHeaderThemeResolvers } from './thread-header'
+
+export const toChatThemeResolvers: ComponentThemeResolver<ChatThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => ({
+  conversationRow: toChatConversationRowThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+  conversationList: toChatConversationListThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+  threadHeader: toChatThreadHeaderThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+  messageList: toChatMessageListThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+  messageBubble: toChatMessageBubbleThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+  attachmentMessageBubble: toChatAttachmentMessageBubbleThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+  systemLine: toChatSystemLineThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+  dateDivider: toChatDateDividerThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+  quickReplyChip: toChatQuickReplyChipThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+  messageComposer: toChatMessageComposerThemeResolvers({
+    themeTokens,
+    semanticTokens,
+    componentTokens,
+  }),
+})

package/src/theme/resolvers/chat/conversation-list.ts

@@ -0,0 +1,35 @@
+import { toContainerStyle } from '../../adapters/container-adapter'
+import type {
+  ChatConversationListFooterStyle,
+  ChatConversationListHeaderStyle,
+  ChatConversationListStyle,
+  ChatConversationListThemeResolvers
+} from '../../types/components/chat'
+import {
+  createSimpleStyleResolver,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+export const toChatConversationListThemeResolvers: ComponentThemeResolver<ChatConversationListThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = () => componentTokens.chat.conversationList({
+    themeTokens,
+    semanticResolvers: semanticTokens
+  })
+
+  return {
+    container: createSimpleStyleResolver((): ChatConversationListStyle => ({
+      ...toContainerStyle(resolve().container),
+      flex: 1,
+    })),
+    header: createSimpleStyleResolver((): ChatConversationListHeaderStyle => (
+      toContainerStyle(resolve().header)
+    )),
+    footer: createSimpleStyleResolver((): ChatConversationListFooterStyle => (
+      toContainerStyle(resolve().footer)
+    )),
+  }
+}

package/src/theme/resolvers/chat/conversation-row.ts

@@ -0,0 +1,64 @@
+import { toContainerStyle } from '../../adapters/container-adapter'
+import { toIconStyle } from '../../adapters/icon-style-adapter'
+import { toTextStyle } from '../../adapters/text-style-adapter'
+import type {
+  ChatConversationRowPreviewStyle,
+  ChatConversationRowState,
+  ChatConversationRowStyle,
+  ChatConversationRowThemeResolvers,
+  ChatConversationRowTimestampStyle,
+  ChatConversationRowTitleStyle,
+  ChatConversationRowUnreadBadgeStyle,
+  ChatConversationRowUnreadBadgeTextStyle,
+  ChatMessageBubbleMetaDataIconStyle
+} from '../../types/components/chat'
+import {
+  createSimpleStyleResolver,
+  createSimpleValueResolver,
+  createStyleResolver,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatConversationRowThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: ChatConversationRowState = {}) => componentTokens.chat.conversationRow({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    state: {
+      isPressed: state.isPressed,
+      isHovered: state.isHovered,
+      isFocused: state.isFocused,
+      isFocusVisible: state.isFocusVisible,
+      isDisabled: state.isDisabled,
+      isUnread: state.isUnread,
+      isSelected: state.isSelected,
+    },
+  })
+
+  return {
+    container: createStyleResolver((state: ChatConversationRowState): ChatConversationRowStyle => (
+      toContainerStyle(resolve(state).container)
+    )),
+    title: createStyleResolver((state: ChatConversationRowState): ChatConversationRowTitleStyle => (
+      toTextStyle(resolve(state).title)
+    )),
+    timestamp: createStyleResolver((state: ChatConversationRowState): ChatConversationRowTimestampStyle => (
+      toTextStyle(resolve(state).timestamp)
+    )),
+    preview: createStyleResolver((state: ChatConversationRowState): ChatConversationRowPreviewStyle => (
+      toTextStyle(resolve(state).preview)
+    )),
+    unreadBadge: createSimpleStyleResolver((): ChatConversationRowUnreadBadgeStyle => (
+      toContainerStyle(resolve().unreadBadge)
+    )),
+    unreadBadgeText: createSimpleStyleResolver((): ChatConversationRowUnreadBadgeTextStyle => (
+      toTextStyle(resolve().unreadBadgeText)
+    )),
+    sentIndicator: createSimpleValueResolver((): ChatMessageBubbleMetaDataIconStyle => (
+      toIconStyle(resolve().sentIndicator)
+    )),
+  }
+}

package/src/theme/resolvers/chat/date-divider.ts

@@ -0,0 +1,31 @@
+import { toContainerStyle } from '../../adapters/container-adapter'
+import { toTextStyle } from '../../adapters/text-style-adapter'
+import type {
+  ChatDateDividerStyle,
+  ChatDateDividerTextStyle,
+  ChatDateDividerThemeResolvers
+} from '../../types/components/chat'
+import {
+  createSimpleStyleResolver,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+export const toChatDateDividerThemeResolvers: ComponentThemeResolver<ChatDateDividerThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = () => componentTokens.chat.dateDivider({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+  })
+
+  return {
+    container: createSimpleStyleResolver((): ChatDateDividerStyle => (
+      toContainerStyle(resolve().container)
+    )),
+    text: createSimpleStyleResolver((): ChatDateDividerTextStyle => (
+      toTextStyle(resolve().text)
+    )),
+  }
+}

package/src/theme/resolvers/chat/index.ts

@@ -0,0 +1,11 @@
+export * from './attachment-message-bubble'
+export * from './chat-theme'
+export * from './conversation-list'
+export * from './conversation-row'
+export * from './date-divider'
+export * from './message-bubble'
+export * from './message-composer'
+export * from './message-list'
+export * from './quick-reply-chip'
+export * from './system-line'
+export * from './thread-header'

package/src/theme/resolvers/chat/message-bubble.ts

@@ -0,0 +1,57 @@
+import type { ChatMessageDirection } from '@helpwave/hightide-design/component-token-resolvers'
+
+import { toContainerStyle } from '../../adapters/container-adapter'
+import { toIconStyle } from '../../adapters/icon-style-adapter'
+import { toTextStyle } from '../../adapters/text-style-adapter'
+import type {
+  ChatMessageBubbleBodyStyle,
+  ChatMessageBubbleBodyTextStyle,
+  ChatMessageBubbleContainerStyle,
+  ChatMessageBubbleMetaDataContainerStyle,
+  ChatMessageBubbleMetaDataIconStyle,
+  ChatMessageBubbleMetaDataStatusContainerStyle,
+  ChatMessageBubbleMetaDataTextStyle,
+  ChatMessageBubbleState,
+  ChatMessageBubbleThemeResolvers
+} from '../../types/components/chat'
+import {
+  createStyleResolver,
+  createValueResolver,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+export const toChatMessageBubbleThemeResolvers: ComponentThemeResolver<ChatMessageBubbleThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (direction?: ChatMessageDirection) => componentTokens.chat.messageBubble({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    config: { direction },
+  })
+
+  return {
+    container: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleContainerStyle => (
+      toContainerStyle(resolve(state.direction).container)
+    )),
+    body: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleBodyStyle => (
+      toContainerStyle(resolve(state.direction).body)
+    )),
+    bodyText: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleBodyTextStyle => (
+      toTextStyle(resolve(state.direction).bodyText)
+    )),
+    metaDataContainer: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataContainerStyle => (
+      toContainerStyle(resolve(state.direction).metaDataContainer)
+    )),
+    metaDataStatusContainer: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataStatusContainerStyle => (
+      toContainerStyle(resolve(state.direction).metaDataStatusContainer)
+    )),
+    metaDataText: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataTextStyle => (
+      toTextStyle(resolve(state.direction).metaDataText)
+    )),
+    metaDataIcon: createValueResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataIconStyle => (
+      toIconStyle(resolve(state.direction).metaDataIcon)
+    )),
+  }
+}

package/src/theme/resolvers/chat/message-composer.ts

@@ -0,0 +1,38 @@
+import { toContainerStyle } from '../../adapters/container-adapter'
+import { toTextStyle } from '../../adapters/text-style-adapter'
+import type { TextStyle } from 'react-native'
+import type {
+  ChatMessageComposerInputStyle,
+  ChatMessageComposerStyle,
+  ChatMessageComposerThemeResolvers
+} from '../../types/components/chat'
+import {
+  createSimpleStyleResolver,
+  createSimpleValueResolver,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+export const toChatMessageComposerThemeResolvers: ComponentThemeResolver<ChatMessageComposerThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = () => componentTokens.chat.messageComposer({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+  })
+
+  return {
+    container: createSimpleStyleResolver((): ChatMessageComposerStyle => (
+      toContainerStyle(resolve().container)
+    )),
+    input: createSimpleStyleResolver((): ChatMessageComposerInputStyle => ({
+      ...toContainerStyle(resolve().input),
+      ...toTextStyle(resolve().text),
+      flex: 1,
+    })),
+    placeholderColor: createSimpleValueResolver((): TextStyle => ({
+      color: resolve().placeholder.color
+    })),
+  }
+}

package/src/theme/resolvers/chat/message-list.ts

@@ -0,0 +1,27 @@
+import { toContainerStyle } from '../../adapters/container-adapter'
+import type {
+  ChatMessageListStyle,
+  ChatMessageListThemeResolvers
+} from '../../types/components/chat'
+import {
+  createSimpleStyleResolver,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+export const toChatMessageListThemeResolvers: ComponentThemeResolver<ChatMessageListThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = () => componentTokens.chat.messageList({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+  })
+
+  return {
+    container: createSimpleStyleResolver((): ChatMessageListStyle => ({
+      ...toContainerStyle(resolve().container),
+      flex: 1,
+    })),
+  }
+}