@helpwave/hightide-native 0.0.8 → 0.1.0

package/src/theme/types/components/chat.ts

@@ -3,13 +3,19 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/utils'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
-import type { Color } from '../color'
 import type {
   InteractionState,
+  SimpleStyleResolver,
   StyleResolverFunction
 } from '../resolver'
+import type { IconStyle } from '../../../icons'
+import type { ThemedPressableState } from './themedPressable'
+import type {
+  AvatarState,
+  AvatarThemeResolvers
+} from './avatar'
 
 export type ChatMessageDirection = 'incoming' | 'outgoing'
 
@@ -30,6 +36,7 @@ export type ChatConversationListHeaderStyle = ViewStyle
 export type ChatConversationListFooterStyle = ViewStyle
 
 export type ChatThreadHeaderStyle = ViewStyle
+export type ChatThreadHeaderContentRowStyle = ViewStyle
 export type ChatThreadHeaderTitleStyle = TextStyle
 export type ChatThreadHeaderSubtitleStyle = TextStyle
 
@@ -40,159 +47,173 @@ export type ChatMessageBubbleState = {
 }
 
 export type ChatMessageBubbleContainerStyle = ViewStyle
-export type ChatMessageBubbleStyle = ViewStyle
-export type ChatMessageBubbleContentStyle = TextStyle
-export type ChatMessageBubbleTimestampStyle = TextStyle
-export type ChatMessageBubbleReceiptStyle = ViewStyle
-export type ChatMessageBubbleReceiptTextStyle = TextStyle
-
-export type ChatMessageBubbleReceiptIconStyle = {
-  color: Color,
-}
-
-export type ChatMessageCardState = {
-  direction: ChatMessageDirection,
-  color?: ColoringType,
-}
-
-export type ChatMessageCardStyle = ViewStyle
-export type ChatMessageCardHeaderStyle = ViewStyle
-export type ChatMessageCardIconStyle = ViewStyle
-
-export type ChatMessageCardIconColor = {
-  color: Color,
-}
-
-export type ChatMessageCardTitleStyle = TextStyle
-export type ChatMessageCardSubtitleStyle = TextStyle
-export type ChatMessageCardBodyStyle = ViewStyle
-export type ChatMessageCardActionsStyle = ViewStyle
-
-export type ChatAttachmentCardState = {
+export type ChatMessageBubbleBodyStyle = ViewStyle
+export type ChatMessageBubbleBodyTextStyle = TextStyle
+export type ChatMessageBubbleMetaDataContainerStyle = ViewStyle
+export type ChatMessageBubbleMetaDataStatusContainerStyle = ViewStyle
+export type ChatMessageBubbleMetaDataTextStyle = TextStyle
+export type ChatMessageBubbleMetaDataIconStyle = IconStyle
+
+export type ChatAttachmentMessageBubbleState = {
   direction: ChatMessageDirection,
 }
 
-export type ChatAttachmentCardStyle = ViewStyle
-export type ChatAttachmentCardIconStyle = ViewStyle
+export type PressableContainerStyle = ViewStyle
+export type PressableStateLayerStyle = ViewStyle
+export type PressableTextStyle = TextStyle
 
-export type ChatAttachmentCardIconColor = {
-  color: Color,
-}
+export type PressableState = ThemedPressableState
 
-export type ChatAttachmentCardNameStyle = TextStyle
-export type ChatAttachmentCardMetadataStyle = TextStyle
+export type ChatAttachmentMessageBubbleFileIconContainerStyle = ViewStyle
+export type ChatAttachmentMessageBubbleFileIconStyle = IconStyle
+export type ChatAttachmentMessageBubbleDownloadIconContainerStyle = ViewStyle
+export type ChatAttachmentMessageBubbleDownloadIconStyle = IconStyle
+export type ChatAttachmentMessageBubbleFileNameTextStyle = TextStyle
+export type ChatAttachmentMessageBubbleFileMetadataTextStyle = TextStyle
 
 export type ChatSystemLineState = {
-  color?: ColoringType,
+  color?: ColorPairToken,
 }
 
 export type ChatSystemLineStyle = ViewStyle
 export type ChatSystemLineTextStyle = TextStyle
 
-export type ChatSystemLineIconStyle = {
-  color: Color,
-}
+export type ChatSystemLineIconStyle = IconStyle
 
 export type ChatDateDividerStyle = ViewStyle
 export type ChatDateDividerTextStyle = TextStyle
 
-export type ChatQuickReplyChipState = InteractionState & {
+export type ChatQuickReplyChipState = {
   isActive?: boolean,
 }
 
-export type ChatQuickReplyChipStyle = ViewStyle
-export type ChatQuickReplyChipTextStyle = TextStyle
-
 export type ChatMessageComposerStyle = ViewStyle
-export type ChatMessageComposerInputStyle = TextStyle
+export type ChatMessageComposerInputStyle = ViewStyle & TextStyle
 
-export type ChatConversationRowTheme = {
+export type ChatConversationRowThemeResolvers = {
   container: StyleResolverFunction<ChatConversationRowState, ChatConversationRowStyle>,
   title: StyleResolverFunction<ChatConversationRowState, ChatConversationRowTitleStyle>,
   timestamp: StyleResolverFunction<ChatConversationRowState, ChatConversationRowTimestampStyle>,
   preview: StyleResolverFunction<ChatConversationRowState, ChatConversationRowPreviewStyle>,
   unreadBadge: StyleResolverFunction<Record<string, never>, ChatConversationRowUnreadBadgeStyle>,
   unreadBadgeText: StyleResolverFunction<Record<string, never>, ChatConversationRowUnreadBadgeTextStyle>,
-  sentIndicator: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptIconStyle>,
+  sentIndicator: StyleResolverFunction<Record<string, never>, ChatMessageBubbleMetaDataIconStyle>,
 }
 
-export type ChatConversationListTheme = {
+export type ChatConversationListThemeResolvers = {
   container: StyleResolverFunction<Record<string, never>, ChatConversationListStyle>,
   header: StyleResolverFunction<Record<string, never>, ChatConversationListHeaderStyle>,
   footer: StyleResolverFunction<Record<string, never>, ChatConversationListFooterStyle>,
 }
 
-export type ChatThreadHeaderTheme = {
+export type ChatThreadHeaderThemeResolvers = {
   container: StyleResolverFunction<Record<string, never>, ChatThreadHeaderStyle>,
+  contentRow: StyleResolverFunction<Record<string, never>, ChatThreadHeaderContentRowStyle>,
   title: StyleResolverFunction<Record<string, never>, ChatThreadHeaderTitleStyle>,
   subtitle: StyleResolverFunction<Record<string, never>, ChatThreadHeaderSubtitleStyle>,
+  avatar: StyleResolverFunction<
+    AvatarState,
+    AvatarThemeResolvers
+  >,
 }
 
-export type ChatMessageListTheme = {
+export type ChatMessageListThemeResolvers = {
   container: StyleResolverFunction<Record<string, never>, ChatMessageListStyle>,
 }
 
-export type ChatMessageBubbleTheme = {
+export type ChatMessageBubbleThemeResolvers = {
   container: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
-  bubble: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleStyle>,
-  content: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleContentStyle>,
-  timestamp: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleTimestampStyle>,
-  receipt: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptStyle>,
-  receiptText: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptTextStyle>,
-  receiptIcon: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptIconStyle>,
-}
-
-export type ChatMessageCardTheme = {
-  container: StyleResolverFunction<ChatMessageCardState, ChatMessageCardStyle>,
-  header: StyleResolverFunction<Record<string, never>, ChatMessageCardHeaderStyle>,
-  icon: StyleResolverFunction<ChatMessageCardState, ChatMessageCardIconStyle>,
-  iconColor: StyleResolverFunction<ChatMessageCardState, ChatMessageCardIconColor>,
-  title: StyleResolverFunction<ChatMessageCardState, ChatMessageCardTitleStyle>,
-  subtitle: StyleResolverFunction<Record<string, never>, ChatMessageCardSubtitleStyle>,
-  body: StyleResolverFunction<Record<string, never>, ChatMessageCardBodyStyle>,
-  actions: StyleResolverFunction<Record<string, never>, ChatMessageCardActionsStyle>,
-}
-
-export type ChatAttachmentCardTheme = {
-  container: StyleResolverFunction<ChatAttachmentCardState, ChatAttachmentCardStyle>,
-  icon: StyleResolverFunction<Record<string, never>, ChatAttachmentCardIconStyle>,
-  iconColor: StyleResolverFunction<Record<string, never>, ChatAttachmentCardIconColor>,
-  name: StyleResolverFunction<Record<string, never>, ChatAttachmentCardNameStyle>,
-  metadata: StyleResolverFunction<Record<string, never>, ChatAttachmentCardMetadataStyle>,
-}
-
-export type ChatSystemLineTheme = {
+  body: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleBodyStyle>,
+  bodyText: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleBodyTextStyle>,
+  metaDataContainer: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleMetaDataContainerStyle>,
+  metaDataStatusContainer: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleMetaDataStatusContainerStyle>,
+  metaDataText: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleMetaDataTextStyle>,
+  metaDataIcon: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleMetaDataIconStyle>,
+}
+
+export type ChatAttachmentMessageBubbleOverridesThemeResolvers = {
+  container: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatMessageBubbleContainerStyle>,
+  body: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatMessageBubbleBodyStyle>,
+  bodyText: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatMessageBubbleBodyTextStyle>,
+  metaDataContainer: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatMessageBubbleMetaDataContainerStyle>,
+  metaDataStatusContainer: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatMessageBubbleMetaDataStatusContainerStyle>,
+  metaDataText: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatMessageBubbleMetaDataTextStyle>,
+  metaDataIcon: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatMessageBubbleMetaDataIconStyle>,
+}
+
+export type ChatAttachmentMessageBubbleThemeResolvers = {
+  chatMessageBubbleOverrides: ChatAttachmentMessageBubbleOverridesThemeResolvers,
+  contentContainer: StyleResolverFunction<
+    ChatAttachmentMessageBubbleState,
+    {
+      container: StyleResolverFunction<
+        PressableState,
+        PressableContainerStyle
+      >,
+      stateLayer: StyleResolverFunction<
+        PressableState,
+        PressableStateLayerStyle
+      >,
+      text: StyleResolverFunction<
+        PressableState,
+        PressableTextStyle
+      >,
+    }
+  >,
+  fileIconContainer: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatAttachmentMessageBubbleFileIconContainerStyle>,
+  fileIcon: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatAttachmentMessageBubbleFileIconStyle>,
+  downloadIconContainer: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatAttachmentMessageBubbleDownloadIconContainerStyle>,
+  downloadIcon: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatAttachmentMessageBubbleDownloadIconStyle>,
+  fileNameText: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatAttachmentMessageBubbleFileNameTextStyle>,
+  fileMetadataText: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatAttachmentMessageBubbleFileMetadataTextStyle>,
+}
+
+export type ChatSystemLineThemeResolvers = {
   container: StyleResolverFunction<ChatSystemLineState, ChatSystemLineStyle>,
   text: StyleResolverFunction<ChatSystemLineState, ChatSystemLineTextStyle>,
   icon: StyleResolverFunction<ChatSystemLineState, ChatSystemLineIconStyle>,
 }
 
-export type ChatDateDividerTheme = {
+export type ChatDateDividerThemeResolvers = {
   container: StyleResolverFunction<Record<string, never>, ChatDateDividerStyle>,
   text: StyleResolverFunction<Record<string, never>, ChatDateDividerTextStyle>,
 }
 
-export type ChatQuickReplyChipTheme = {
-  container: StyleResolverFunction<ChatQuickReplyChipState, ChatQuickReplyChipStyle>,
-  text: StyleResolverFunction<ChatQuickReplyChipState, ChatQuickReplyChipTextStyle>,
-}
-
-export type ChatMessageComposerTheme = {
+export type ChatQuickReplyChipThemeResolvers = {
+  pressable: StyleResolverFunction<
+    ChatQuickReplyChipState,
+    {
+      container: StyleResolverFunction<
+        PressableState,
+        PressableContainerStyle
+      >,
+      stateLayer: StyleResolverFunction<
+        PressableState,
+        PressableStateLayerStyle
+      >,
+      text: StyleResolverFunction<
+        PressableState,
+        PressableTextStyle
+      >,
+    }
+  >,
+}
+
+export type ChatMessageComposerThemeResolvers = {
   container: StyleResolverFunction<Record<string, never>, ChatMessageComposerStyle>,
   input: StyleResolverFunction<Record<string, never>, ChatMessageComposerInputStyle>,
-  placeholderColor: StyleResolverFunction<Record<string, never>, Color>,
-}
-
-export type ChatTheme = {
-  conversationRow: ChatConversationRowTheme,
-  conversationList: ChatConversationListTheme,
-  threadHeader: ChatThreadHeaderTheme,
-  messageList: ChatMessageListTheme,
-  messageBubble: ChatMessageBubbleTheme,
-  messageCard: ChatMessageCardTheme,
-  attachmentCard: ChatAttachmentCardTheme,
-  systemLine: ChatSystemLineTheme,
-  dateDivider: ChatDateDividerTheme,
-  quickReplyChip: ChatQuickReplyChipTheme,
-  messageComposer: ChatMessageComposerTheme,
+  placeholderColor: SimpleStyleResolver<TextStyle>,
+}
+
+export type ChatThemeResolvers = {
+  conversationRow: ChatConversationRowThemeResolvers,
+  conversationList: ChatConversationListThemeResolvers,
+  threadHeader: ChatThreadHeaderThemeResolvers,
+  messageList: ChatMessageListThemeResolvers,
+  messageBubble: ChatMessageBubbleThemeResolvers,
+  attachmentMessageBubble: ChatAttachmentMessageBubbleThemeResolvers,
+  systemLine: ChatSystemLineThemeResolvers,
+  dateDivider: ChatDateDividerThemeResolvers,
+  quickReplyChip: ChatQuickReplyChipThemeResolvers,
+  messageComposer: ChatMessageComposerThemeResolvers,
 }

package/src/theme/types/components/checkbox.ts

@@ -1,33 +1,32 @@
 import type { ViewStyle } from 'react-native'
 
-import type { ElementSize } from '@helpwave/hightide-design/types'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import type { ComponentSize } from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import type { Color } from '../color'
 import type {
   InteractionState,
   StyleResolverFunction
 } from '../resolver'
+import type { IconStyle } from '../../../icons'
 
-export type CheckboxSize = 'sm' | 'md' | 'lg'
+export type CheckboxSize = ComponentSize
 
 export type CheckboxState = InteractionState & {
   size?: CheckboxSize,
+  color?: ColorPairToken,
   isChecked?: boolean,
   isIndeterminate?: boolean,
-  isInvalid?: boolean,
   isRounded?: boolean,
-  alwaysShowCheckIcon?: boolean,
 }
 
 export type CheckboxStyle = ViewStyle
 
-export type CheckboxIconStyle = {
-  color: Color,
-  size: Exclude<ElementSize, 'xs'>,
-  visible: boolean,
-}
+export type CheckboxStateLayerStyle = ViewStyle
+
+export type CheckboxIconStyle = IconStyle
 
-export type CheckboxTheme = {
-  checkbox: StyleResolverFunction<CheckboxState, CheckboxStyle>,
+export type CheckboxThemeResolvers = {
+  container: StyleResolverFunction<CheckboxState, CheckboxStyle>,
+  stateLayer: StyleResolverFunction<CheckboxState, CheckboxStateLayerStyle>,
   icon: StyleResolverFunction<CheckboxState, CheckboxIconStyle>,
 }

package/src/theme/types/components/chip.ts

@@ -3,28 +3,22 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/utils'
-import type {
-  ChipColoringStyle,
-  ElementSize
-} from '@helpwave/hightide-design/types'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import type { ChipVariant, ComponentSize } from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import type {
-  InteractionState,
-  StyleResolverFunction
-} from '../resolver'
+import type { StyleResolverFunction } from '../resolver'
 
-export type ChipState = InteractionState & {
-  size?: ElementSize,
-  color?: ColoringType,
-  coloringStyle?: ChipColoringStyle,
+export type ChipState = {
+  size?: ComponentSize,
+  color?: ColorPairToken,
+  variant?: ChipVariant,
 }
 
 export type ChipStyle = ViewStyle
 
 export type ChipTextStyle = TextStyle
 
-export type ChipTheme = {
+export type ChipThemeResolvers = {
   chip: StyleResolverFunction<ChipState, ChipStyle>,
   text: StyleResolverFunction<ChipState, ChipTextStyle>,
 }

package/src/theme/types/components/divider.ts

@@ -0,0 +1,18 @@
+import type { ColorToken } from '@helpwave/hightide-design/primitive-tokens'
+import type { DividerDirection } from '@helpwave/hightide-design/component-token-resolvers'
+import type { ViewStyle } from 'react-native'
+
+import type { StyleResolverFunction } from '../resolver'
+
+export type DividerState = {
+  direction?: DividerDirection,
+  color?: ColorToken,
+  width?: number,
+  margin?: number,
+}
+
+export type DividerStyle = ViewStyle
+
+export type DividerThemeResolvers = {
+  container: StyleResolverFunction<DividerState, DividerStyle>,
+}

package/src/theme/types/components/hightide.ts

@@ -1,46 +1,45 @@
-import type { Color } from '../color'
-import type { AvatarTheme } from './avatar'
-import type { ButtonTheme } from './button'
-import type { ChatTheme } from './chat'
-import type { CheckboxTheme } from './checkbox'
-import type { ChipTheme } from './chip'
-import type { IconButtonTheme } from './iconButton'
-import type { InputTheme } from './input'
-import type { MenuTheme } from './menu'
-import type { MultiSelectTheme } from './multiSelect'
-import type { SelectTheme } from './select'
-import type { SwitchTheme } from './switch'
+import type { IconSize } from '@helpwave/hightide-design/theme-tokens'
+import type { IconTokens } from '@helpwave/hightide-design/component-token-resolvers'
 
-export type ColoringDefinition = {
-  color: Color,
-  onColor: Color,
-  hover: Color,
-  text?: Color,
-  textHover?: Color,
-  outline?: Color,
-  outlineHover?: Color,
-  tonalText?: Color,
-  tonalBackground?: Color,
-}
+import type {
+  AvatarGroupThemeResolvers,
+  AvatarThemeResolvers,
+  AvatarWithStatusThemeResolvers
+} from './avatar'
+import type { ButtonThemeResolvers } from './button'
+import type { ChatThemeResolvers } from './chat'
+import type { CheckboxThemeResolvers } from './checkbox'
+import type { ChipThemeResolvers } from './chip'
+import type { IconButtonThemeResolvers } from './iconButton'
+import type { InputThemeResolvers } from './input'
+import type { SearchBarThemeResolvers } from './searchBar'
+import type { CardThemeResolvers } from './card'
+import type { DividerThemeResolvers } from './divider'
+import type { ListItemThemeResolvers } from './listItem'
+import type { MultiSelectThemeResolvers } from './multiSelect'
+import type { SelectThemeResolvers } from './select'
+import type { SwitchThemeResolvers } from './switch'
+import type { ThemedPressableThemeResolvers } from './themedPressable'
+
+export type IconThemeResolvers = Record<IconSize, IconTokens>
 
 export type HightideComponentThemes = {
-  coloring: {
-    primary: ColoringDefinition,
-    secondary: ColoringDefinition,
-    positive: ColoringDefinition,
-    warning: ColoringDefinition,
-    negative: ColoringDefinition,
-    neutral: ColoringDefinition,
-  } & Record<string, ColoringDefinition>,
-  button: ButtonTheme,
-  iconButton: IconButtonTheme,
-  chip: ChipTheme,
-  checkbox: CheckboxTheme,
-  switch: SwitchTheme,
-  input: InputTheme,
-  select: SelectTheme,
-  multiSelect: MultiSelectTheme,
-  chat: ChatTheme,
-  menu: MenuTheme,
-  avatar: AvatarTheme,
+  button: ButtonThemeResolvers,
+  iconButton: IconButtonThemeResolvers,
+  themedPressable: ThemedPressableThemeResolvers,
+  chip: ChipThemeResolvers,
+  checkbox: CheckboxThemeResolvers,
+  switch: SwitchThemeResolvers,
+  input: InputThemeResolvers,
+  searchBar: SearchBarThemeResolvers,
+  select: SelectThemeResolvers,
+  multiSelect: MultiSelectThemeResolvers,
+  chat: ChatThemeResolvers,
+  card: CardThemeResolvers,
+  divider: DividerThemeResolvers,
+  listItem: ListItemThemeResolvers,
+  avatar: AvatarThemeResolvers,
+  avatarWithStatus: AvatarWithStatusThemeResolvers,
+  avatarGroup: AvatarGroupThemeResolvers,
+  icon: IconThemeResolvers,
 }

package/src/theme/types/components/iconButton.ts

@@ -1,30 +1,35 @@
-import type { ViewStyle } from 'react-native'
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/utils'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type {
-  ButtonColoringStyle,
-  ElementSize
-} from '@helpwave/hightide-design/types'
+  ComponentSize,
+  IconButtonVariant
+} from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import type { Color } from '../color'
 import type {
   InteractionState,
   StyleResolverFunction
 } from '../resolver'
+import type { IconStyle } from '../../../icons'
 
 export type IconButtonState = InteractionState & {
-  size?: ElementSize,
-  color?: ColoringType,
-  coloringStyle?: ButtonColoringStyle,
+  size?: ComponentSize,
+  color?: ColorPairToken,
+  variant?: IconButtonVariant,
 }
 
 export type IconButtonStyle = ViewStyle
 
-export type IconButtonIconStyle = {
-  color: Color,
-}
+export type IconButtonIconStyle = IconStyle
+
+export type IconButtonTextStyle = TextStyle
 
-export type IconButtonTheme = {
-  button: StyleResolverFunction<IconButtonState, IconButtonStyle>,
+export type IconButtonThemeResolvers = {
+  container: StyleResolverFunction<IconButtonState, IconButtonStyle>,
+  stateLayer: StyleResolverFunction<IconButtonState, IconButtonStyle>,
   icon: StyleResolverFunction<IconButtonState, IconButtonIconStyle>,
+  text: StyleResolverFunction<IconButtonState, IconButtonTextStyle>,
 }

package/src/theme/types/components/index.ts

@@ -1,12 +1,16 @@
 export * from './avatar'
 export * from './button'
+export * from './card'
 export * from './chat'
 export * from './checkbox'
 export * from './chip'
+export * from './divider'
 export * from './hightide'
 export * from './iconButton'
 export * from './input'
-export * from './menu'
+export * from './listItem'
 export * from './multiSelect'
+export * from './searchBar'
 export * from './select'
 export * from './switch'
+export * from './themedPressable'

package/src/theme/types/components/input.ts

@@ -1,19 +1,28 @@
-import type { TextStyle } from 'react-native'
+import type { TextStyle, ViewStyle } from 'react-native'
+
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
-import type { Color } from '../color'
 import type {
   InteractionState,
   StyleResolverFunction
 } from '../resolver'
+import type { IconStyle } from '../../../icons'
 
 export type InputState = InteractionState & {
-  isInvalid?: boolean,
-  isReadOnly?: boolean,
+  color?: ColorPairToken,
 }
 
-export type InputStyle = TextStyle
+export type InputContainerStyle = ViewStyle
+
+export type InputTextStyle = TextStyle
+
+export type InputPlaceholderStyle = TextStyle
+
+export type InputIconStyle = IconStyle
 
-export type InputTheme = {
-  input: StyleResolverFunction<InputState, InputStyle>,
-  placeholderColor: StyleResolverFunction<InputState, Color>,
+export type InputThemeResolvers = {
+  container: StyleResolverFunction<InputState, InputContainerStyle>,
+  text: StyleResolverFunction<InputState, InputTextStyle>,
+  placeholder: StyleResolverFunction<InputState, InputPlaceholderStyle>,
+  icon: StyleResolverFunction<InputState, InputIconStyle>,
 }