@helpwave/hightide-native 0.0.6 → 0.0.7

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "files": [
     "src"
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.0.4",
-    "@helpwave/hightide-utils": "0.0.4"
+    "@helpwave/hightide-design": "0.0.5",
+    "@helpwave/hightide-utils": "0.0.5"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",

package/src/components/chat/ChatMessageCard.tsx

@@ -10,7 +10,7 @@ import {
   type ViewStyle
 } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {

package/src/components/chat/ChatSystemLine.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native'
 import { CheckCheck } from 'lucide-react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {

package/src/components/user-interaction/Button.tsx

@@ -13,7 +13,7 @@ import {
 import {
   coloringTypes,
   type ColoringType
-} from '@helpwave/hightide-design/helpers'
+} from '@helpwave/hightide-design/utils'
 import type {
   ButtonColoringStyle,
   ElementSize

package/src/components/user-interaction/IconButton.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-native'
 import type { LucideIcon } from 'lucide-react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 import type {
   ButtonColoringStyle,
   ElementSize

package/src/components/visualization-and-display/Avatar.tsx

@@ -0,0 +1,286 @@
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType,
+  type ReactNode
+} from 'react'
+import {
+  Image,
+  Text,
+  View,
+  type ImageProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+import { User } from 'lucide-react-native'
+
+import type { ElementSize } from '@helpwave/hightide-design/types'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type {
+  AvatarGroupMoreStyle,
+  AvatarGroupStackStyle,
+  AvatarImageStyle,
+  AvatarIconStyle,
+  AvatarStatus,
+  AvatarStyle,
+  AvatarTextStyle,
+  AvatarWithLabelContainerStyle,
+  AvatarWithLabelTextStyle,
+  AvatarWithStatusContainerStyle,
+  AvatarStatusDotStyle
+} from '../../theme/types/components/avatar'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+
+export type AvatarSize = ElementSize
+
+type ImageConfig = {
+  avatarUrl: string,
+  alt: string,
+}
+
+export type AvatarImageProps = Omit<ImageProps, 'source'> & {
+  source: { uri: string },
+  alt?: string,
+}
+
+const DefaultAvatarImage: ComponentType<AvatarImageProps> = ({ alt, ...props }) => (
+  <Image
+    {...props}
+    accessibilityLabel={alt}
+  />
+)
+
+export const AvatarUtil = {
+  sizes: ['xs', 'sm', 'md', 'lg'] as const satisfies readonly ElementSize[],
+  statuses: ['online', 'offline', 'away', 'busy', 'unknown'] as const satisfies readonly AvatarStatus[],
+}
+
+export type AvatarProps = Omit<ViewProps, 'children' | 'style'> & {
+  image?: ImageConfig,
+  name?: string,
+  size?: AvatarSize,
+  ImageComponent?: ComponentType<AvatarImageProps>,
+  style?: StyleProp<ViewStyle>,
+  avatarStyle?: StyleOverwrite<{ size?: ElementSize, isGrouped?: boolean, groupIndex?: number }, AvatarStyle>,
+  imageStyle?: StyleOverwrite<{ size?: ElementSize, isGrouped?: boolean, groupIndex?: number }, AvatarImageStyle>,
+  textStyle?: StyleOverwrite<{ size?: ElementSize, isGrouped?: boolean, groupIndex?: number }, AvatarTextStyle>,
+  iconStyle?: StyleOverwrite<{ size?: ElementSize, isGrouped?: boolean, groupIndex?: number }, AvatarIconStyle>,
+  isGrouped?: boolean,
+  groupIndex?: number,
+}
+
+export const Avatar = ({
+  image: initialImage,
+  name,
+  size = 'md',
+  ImageComponent = DefaultAvatarImage,
+  style,
+  avatarStyle,
+  imageStyle,
+  textStyle,
+  iconStyle,
+  isGrouped = false,
+  groupIndex,
+  ...props
+}: AvatarProps) => {
+  const { theme } = useTheme()
+  const [hasError, setHasError] = useState(false)
+  const [hasLoaded, setHasLoaded] = useState(false)
+  const [image, setImage] = useState(initialImage)
+  const ImageElement = ImageComponent
+
+  const state = useMemo(() => ({
+    size,
+    isGrouped,
+    groupIndex,
+  }), [size, isGrouped, groupIndex])
+
+  const displayName = useMemo(() => {
+    const maxLetters = size === 'sm' ? 1 : 2
+    return (name ?? '')
+      .split(' ')
+      .filter((_, index) => index < maxLetters)
+      .map(value => value[0])
+      .join('')
+      .toUpperCase()
+  }, [name, size])
+
+  const isShowingImage = !!image && (!hasError || !hasLoaded)
+  const isShowingFallback = !hasLoaded || hasError
+
+  useEffect(() => {
+    if (initialImage?.avatarUrl !== image?.avatarUrl) {
+      setHasError(false)
+      setHasLoaded(false)
+    }
+    setImage(initialImage)
+  }, [image?.avatarUrl, initialImage])
+
+  const resolvedAvatar = theme.components.avatar.avatar(state, avatarStyle)
+  const resolvedImage = theme.components.avatar.image(state, imageStyle)
+  const resolvedText = theme.components.avatar.text(state, textStyle)
+  const resolvedIcon = theme.components.avatar.icon(state, iconStyle)
+
+  return (
+    <View
+      {...props}
+      style={[resolvedAvatar, style]}
+    >
+      {isShowingImage && (
+        <ImageElement
+          key={image?.avatarUrl}
+          source={{ uri: image?.avatarUrl ?? '' }}
+          alt={image?.alt}
+          style={[resolvedImage, { opacity: hasLoaded && !hasError ? 1 : 0 }]}
+          onLoad={() => setHasLoaded(true)}
+          onError={() => setHasError(true)}
+        />
+      )}
+      {isShowingFallback && (
+        name ? (
+          <Text style={resolvedText}>{displayName}</Text>
+        ) : (
+          <User
+            size={resolvedIcon.size}
+            strokeWidth={resolvedIcon.strokeWidth}
+            color={resolvedIcon.color}
+          />
+        )
+      )}
+    </View>
+  )
+}
+
+export type AvatarGroupProps = Omit<ViewProps, 'children' | 'style'> & {
+  avatars: Omit<AvatarProps, 'size' | 'isGrouped' | 'groupIndex'>[],
+  showTotalNumber?: boolean,
+  size?: AvatarSize,
+  ImageComponent?: ComponentType<AvatarImageProps>,
+  style?: StyleProp<ViewStyle>,
+  stackStyle?: StyleOverwrite<{ size?: ElementSize, count?: number }, AvatarGroupStackStyle>,
+  moreStyle?: StyleOverwrite<{ size?: ElementSize, count?: number }, AvatarGroupMoreStyle>,
+}
+
+export const AvatarGroup = ({
+  avatars,
+  showTotalNumber = true,
+  size = 'md',
+  ImageComponent,
+  style,
+  stackStyle,
+  moreStyle,
+  ...props
+}: AvatarGroupProps) => {
+  const { theme } = useTheme()
+  const maxShownProfiles = theme.layout.avatarGroup.maxShown
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)
+  const notDisplayedProfiles = avatars.length - maxShownProfiles
+
+  const state = useMemo(() => ({
+    size,
+    count: displayedProfiles.length,
+  }), [size, displayedProfiles.length])
+
+  const resolvedContainer = theme.components.avatar.group.container(state)
+  const resolvedStack = theme.components.avatar.group.stack(state, stackStyle)
+  const resolvedMore = theme.components.avatar.group.more(state, moreStyle)
+
+  return (
+    <View
+      {...props}
+      style={[resolvedContainer, style]}
+    >
+      <View style={resolvedStack}>
+        {displayedProfiles.map((avatar, index) => (
+          <Avatar
+            {...avatar}
+            key={index}
+            size={size}
+            isGrouped
+            groupIndex={index}
+            ImageComponent={avatar.ImageComponent ?? ImageComponent}
+          />
+        ))}
+      </View>
+      {showTotalNumber && notDisplayedProfiles > 0 && (
+        <Text style={resolvedMore}>
+          {`+ ${notDisplayedProfiles}`}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export type { AvatarStatus }
+
+export type AvatarWithStatusProps = AvatarProps & {
+  status?: AvatarStatus,
+  containerStyle?: StyleOverwrite<{ size?: ElementSize, status?: AvatarStatus }, AvatarWithStatusContainerStyle>,
+  statusDotStyle?: StyleOverwrite<{ size?: ElementSize, status?: AvatarStatus }, AvatarStatusDotStyle>,
+}
+
+export const AvatarWithStatus = ({
+  status = 'unknown',
+  size = 'md',
+  style,
+  containerStyle,
+  statusDotStyle,
+  ...avatarProps
+}: AvatarWithStatusProps) => {
+  const { theme } = useTheme()
+
+  const state = useMemo(() => ({
+    size,
+    status,
+  }), [size, status])
+
+  const resolvedContainer = theme.components.avatar.withStatus.container(state, containerStyle)
+  const resolvedStatusDot = theme.components.avatar.withStatus.statusDot(state, statusDotStyle)
+
+  return (
+    <View style={[resolvedContainer, style]}>
+      <Avatar {...avatarProps} size={size} />
+      <View style={resolvedStatusDot} />
+    </View>
+  )
+}
+
+type AvatarWithLabelPosition = 'left' | 'right'
+
+export type AvatarWithLabelProps = AvatarProps & {
+  label: ReactNode,
+  labelPosition?: AvatarWithLabelPosition,
+  containerStyle?: StyleOverwrite<{ size?: ElementSize }, AvatarWithLabelContainerStyle>,
+  labelStyle?: StyleOverwrite<{ size?: ElementSize }, AvatarWithLabelTextStyle>,
+}
+
+export const AvatarWithLabel = ({
+  label,
+  labelPosition = 'left',
+  size = 'md',
+  style,
+  containerStyle,
+  labelStyle,
+  ...avatarProps
+}: AvatarWithLabelProps) => {
+  const { theme } = useTheme()
+
+  const state = useMemo(() => ({ size }), [size])
+  const resolvedContainer = theme.components.avatar.withLabel.container(state, containerStyle)
+  const resolvedLabel = theme.components.avatar.withLabel.text(state, labelStyle)
+
+  const avatar = <Avatar {...avatarProps} size={size} />
+  const labelElement = typeof label === 'string' || typeof label === 'number'
+    ? <Text style={resolvedLabel}>{label}</Text>
+    : label
+
+  return (
+    <View style={[resolvedContainer, style]}>
+      {labelPosition === 'left' ? labelElement : avatar}
+      {labelPosition === 'left' ? avatar : labelElement}
+    </View>
+  )
+}

package/src/components/visualization-and-display/Chip.tsx

@@ -13,7 +13,7 @@ import {
 import {
   coloringTypes,
   type ColoringType
-} from '@helpwave/hightide-design/helpers'
+} from '@helpwave/hightide-design/utils'
 import type {
   ChipColoringStyle,
   ElementSize

package/src/components/visualization-and-display/index.ts

@@ -1,2 +1,3 @@
+export * from './Avatar'
 export * from './Chip'
 export * from './Icon'

package/src/global-contexts/hightide-config/HightideConfigUtils.ts

@@ -1,8 +1,8 @@
 import type { SupportedThemesConfig } from '@helpwave/hightide-utils/context'
 
 import type { SupportedLocalesConfig } from '../localization/forward-exports'
-import { themes } from '../../theme/themes/nativeThemes'
-import type { Theme } from '../../theme/types/theme'
+import { themes } from '../../theme/themes/hightideThemes'
+import type { HightideTheme } from '../../theme/types/theme'
 
 export const HightideConfigUtils = {
   defaultSupportedLocales: {
@@ -24,5 +24,5 @@ export const HightideConfigUtils = {
       },
       theme: themes.dark,
     },
-  } as const satisfies SupportedThemesConfig<Theme>,
+  } as const satisfies SupportedThemesConfig<HightideTheme>,
 }

package/src/global-contexts/theme/ThemeContext.ts

@@ -7,11 +7,11 @@ import type {
   ThemeConfigValue,
   ThemeInformation
 } from './forward-exports'
-import type { Theme } from '../../theme/types/theme'
+import type { HightideTheme } from '../../theme/types/theme'
 
 export type { ThemeInformation }
 
-export type ThemeContextValue = ThemeConfigValue<Theme> & {
+export type ThemeContextValue = ThemeConfigValue<HightideTheme> & {
   isInitialized: boolean,
 }
 

package/src/global-contexts/theme/ThemeProvider.tsx

@@ -19,8 +19,8 @@ import {
   type SystemTheme
 } from './forward-exports'
 import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
-import type { ThemeMode } from '../../theme/themes/nativeThemes'
-import type { Theme } from '../../theme/types/theme'
+import type { ThemeMode } from '../../theme/themes/hightideThemes'
+import type { HightideTheme } from '../../theme/types/theme'
 
 export type ThemeProviderProps<T> = PropsWithChildren & {
   theme?: ThemeMode | null,
@@ -66,7 +66,7 @@ export const ThemeProvider = ({
   fallbackTheme = 'light',
   supportedThemes = HightideConfigUtils.defaultSupportedThemes,
   onChangedTheme,
-}: ThemeProviderProps<Theme>) => {
+}: ThemeProviderProps<HightideTheme>) => {
   const store = useNativeKeyValueStore()
   const systemTheme = useNativeSystemTheme()
 

package/src/theme/resolvers/avatar.ts

@@ -0,0 +1,231 @@
+import type {
+  ImageStyle,
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
+import {
+  componentLayouts,
+  fontWeights
+} from '@helpwave/hightide-design/tokens'
+import type {
+  ElementSize,
+  HightideThemeTokens as DesignTokensTheme,
+  TypographyTokens
+} from '@helpwave/hightide-design/types'
+
+import { resolveColoringStyles } from './coloring'
+import type {
+  ColorPalette,
+  HightideSemanticColors
+} from '../types/color'
+import type {
+  AvatarGroupState,
+  AvatarIconStyle,
+  AvatarState,
+  AvatarStatus,
+  AvatarTheme,
+  AvatarWithLabelState,
+  AvatarWithStatusState
+} from '../types/components/avatar'
+import type { HightideComponentThemes } from '../types/components/hightide'
+import { createStyleResolver } from '../types/resolver'
+
+const avatarFontWeights: Record<ElementSize, string> = {
+  xs: fontWeights.semibold,
+  sm: fontWeights.semibold,
+  md: fontWeights.semibold,
+  lg: fontWeights.bold,
+}
+
+const statusColor = (
+  status: AvatarStatus,
+  semantic: HightideSemanticColors,
+  gray: ColorPalette
+): string => {
+  switch (status) {
+  case 'online':
+    return semantic.positive
+  case 'busy':
+    return semantic.negative
+  case 'away':
+    return semantic.warning
+  case 'offline':
+  case 'unknown':
+  default:
+    return gray[500]
+  }
+}
+
+export type CreateAvatarThemeOptions = {
+  semantic: HightideSemanticColors,
+  coloring: HightideComponentThemes['coloring'],
+  gray: ColorPalette,
+  typography: TypographyTokens,
+}
+
+export const createAvatarTheme = ({
+  semantic,
+  coloring,
+  gray,
+  typography,
+}: CreateAvatarThemeOptions): AvatarTheme => {
+  const resolveAvatar = (state: AvatarState) => {
+    const size = state.size ?? 'md'
+    const layout = componentLayouts.avatar[size]
+    const groupLayout = componentLayouts.avatarGroup
+    const resolved = resolveColoringStyles(coloring.primary, 'solid', semantic)
+    const borderRadius = layout.size / 2
+
+    const avatar: ViewStyle = {
+      position: state.isGrouped ? 'absolute' : 'relative',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: layout.size,
+      height: layout.size,
+      padding: layout.padding,
+      borderRadius,
+      backgroundColor: resolved.backgroundColor,
+      overflow: 'hidden',
+      ...(state.isGrouped ? {
+        left: (state.groupIndex ?? 0) * layout.size * groupLayout.overlap,
+        zIndex: groupLayout.maxShown - (state.groupIndex ?? 0),
+        shadowColor: '#000000',
+        shadowOffset: { width: 4, height: 0 },
+        shadowOpacity: 0.2,
+        shadowRadius: 4,
+        elevation: 4,
+      } : {}),
+    }
+
+    const image: ImageStyle = {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: layout.size,
+      height: layout.size,
+      borderRadius,
+    }
+
+    const text: TextStyle = {
+      color: resolved.color,
+      fontSize: layout.fontSize,
+      fontWeight: avatarFontWeights[size] as TextStyle['fontWeight'],
+      textAlign: 'center',
+    }
+
+    const icon: AvatarIconStyle = {
+      size: componentLayouts.icon[size].size,
+      strokeWidth: componentLayouts.icon[size].strokeWidth,
+      color: resolved.color,
+    }
+
+    return { avatar, image, text, icon }
+  }
+
+  const resolveWithStatus = (state: AvatarWithStatusState) => {
+    const size = state.size ?? 'md'
+    const status = state.status ?? 'unknown'
+    const layout = componentLayouts.avatar[size]
+
+    const container: ViewStyle = {
+      position: 'relative',
+      alignSelf: 'flex-start',
+    }
+
+    const statusDot: ViewStyle = {
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      zIndex: 1,
+      width: layout.statusDotSize,
+      height: layout.statusDotSize,
+      borderRadius: layout.statusDotSize / 2,
+      borderWidth: layout.statusDotBorderWidth,
+      borderColor: semantic.background,
+      backgroundColor: statusColor(status, semantic, gray),
+    }
+
+    return { container, statusDot }
+  }
+
+  const resolveWithLabel = (_state: AvatarWithLabelState) => {
+    const bodyMedium = typography.scales.body.medium
+
+    const container: ViewStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: componentLayouts.avatarGroup.gap,
+    }
+
+    const text: TextStyle = {
+      fontSize: bodyMedium.fontSize,
+      fontWeight: bodyMedium.fontWeight as TextStyle['fontWeight'],
+      lineHeight: bodyMedium.lineHeight,
+      color: semantic.onBackground,
+      flexShrink: 1,
+    }
+
+    return { container, text }
+  }
+
+  const resolveGroup = (state: AvatarGroupState) => {
+    const size = state.size ?? 'md'
+    const layout = componentLayouts.avatar[size]
+    const groupLayout = componentLayouts.avatarGroup
+    const visibleCount = Math.min(state.count ?? groupLayout.maxShown, groupLayout.maxShown)
+    const stackWidth = layout.size * (groupLayout.overlap * Math.max(visibleCount - 1, 0) + 1)
+
+    const container: ViewStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: groupLayout.gap,
+      height: layout.size,
+      alignSelf: 'flex-start',
+    }
+
+    const stack: ViewStyle = {
+      position: 'relative',
+      width: stackWidth,
+      height: layout.size,
+    }
+
+    const more: TextStyle = {
+      fontSize: (layout.size * 2) / 3,
+      color: semantic.onBackground,
+      flexShrink: 1,
+    }
+
+    return { container, stack, more }
+  }
+
+  return {
+    avatar: createStyleResolver((state) => resolveAvatar(state).avatar),
+    image: createStyleResolver((state) => resolveAvatar(state).image),
+    text: createStyleResolver((state) => resolveAvatar(state).text),
+    icon: createStyleResolver((state) => resolveAvatar(state).icon),
+    withStatus: {
+      container: createStyleResolver((state) => resolveWithStatus(state).container),
+      statusDot: createStyleResolver((state) => resolveWithStatus(state).statusDot),
+    },
+    withLabel: {
+      container: createStyleResolver((state) => resolveWithLabel(state).container),
+      text: createStyleResolver((state) => resolveWithLabel(state).text),
+    },
+    group: {
+      container: createStyleResolver((state) => resolveGroup(state).container),
+      stack: createStyleResolver((state) => resolveGroup(state).stack),
+      more: createStyleResolver((state) => resolveGroup(state).more),
+    },
+  }
+}
+
+export const createAvatarThemeFromDesign = (theme: DesignTokensTheme): AvatarTheme => {
+  return createAvatarTheme({
+    semantic: theme.semanticColors,
+    coloring: theme.coloring as HightideComponentThemes['coloring'],
+    gray: theme.colors.gray.value as ColorPalette,
+    typography: theme.typography,
+  })
+}

package/src/theme/resolvers/button.ts

@@ -8,7 +8,7 @@ import {
   fontWeights
 } from '@helpwave/hightide-design/tokens'
 import type {
-  HightideDesignTokens as DesignTokensTheme,
+  HightideThemeTokens as DesignTokensTheme,
   ElementSize
 } from '@helpwave/hightide-design/types'
 

package/src/theme/resolvers/chat.ts

@@ -4,11 +4,11 @@ import {
   type ViewStyle
 } from 'react-native'
 
-import { hexWithAlpha } from '@helpwave/hightide-design/helpers'
+import { hexWithAlpha } from '@helpwave/hightide-design/utils'
 import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type {

package/src/theme/resolvers/checkbox.ts

@@ -3,7 +3,7 @@ import type { ViewStyle } from 'react-native'
 import { componentLayouts } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme,
+  HightideThemeTokens as DesignTokensTheme,
   ElementSize
 } from '@helpwave/hightide-design/types'
 

package/src/theme/resolvers/chip.ts

@@ -7,7 +7,7 @@ import {
   componentLayouts,
   fontWeights
 } from '@helpwave/hightide-design/tokens'
-import type { HightideDesignTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
+import type { HightideThemeTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
 
 import { resolveColoringStyles } from './coloring'
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/resolvers/coloring.ts

@@ -1,6 +1,6 @@
 import {
   hexWithAlpha
-} from '@helpwave/hightide-design/helpers'
+} from '@helpwave/hightide-design/utils'
 import { componentLayouts } from '@helpwave/hightide-design/tokens'
 import type {
   ButtonColoringStyle,

package/src/theme/resolvers/iconButton.ts

@@ -1,7 +1,7 @@
 import type { ViewStyle } from 'react-native'
 
 import { componentLayouts } from '@helpwave/hightide-design/tokens'
-import type { HightideDesignTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
+import type { HightideThemeTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
 
 import {
   isOutlineColoringStyle,

package/src/theme/resolvers/index.ts

@@ -1,3 +1,4 @@
+export * from './avatar'
 export * from './button'
 export * from './chat'
 export * from './checkbox'

package/src/theme/resolvers/input.ts

@@ -3,7 +3,7 @@ import type { TextStyle } from 'react-native'
 import { componentLayouts } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/resolvers/menu.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native'
 import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/resolvers/multiSelect.ts

@@ -1,7 +1,7 @@
 import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/resolvers/select.ts

@@ -1,7 +1,7 @@
 import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/themes/{createTheme.ts → createHightideTheme.ts}

@@ -1,8 +1,9 @@
 import type {
   ColorPaletteToken,
-  HightideDesignTokens
+  HightideThemeTokens
 } from '@helpwave/hightide-design/types'
 
+import { createAvatarThemeFromDesign } from '../resolvers/avatar'
 import { createButtonThemeFromDesign } from '../resolvers/button'
 import { createChatThemeFromDesign } from '../resolvers/chat'
 import { createCheckboxThemeFromDesign } from '../resolvers/checkbox'
@@ -17,7 +18,7 @@ import type {
   ColorPalette,
   HightideColors
 } from '../types/color'
-import type { Theme } from '../types/theme'
+import type { HightideTheme } from '../types/theme'
 
 const unwrapColorPaletteToken = (token: ColorPaletteToken): Color | ColorPalette => {
   if (token.type === 'singleValue') {
@@ -26,7 +27,7 @@ const unwrapColorPaletteToken = (token: ColorPaletteToken): Color | ColorPalette
   return token.value
 }
 
-const unwrapColors = (colors: HightideDesignTokens['colors']): HightideColors & Record<string, Color | ColorPalette> => {
+const unwrapColors = (colors: HightideThemeTokens['colors']): HightideColors & Record<string, Color | ColorPalette> => {
   const result: Record<string, Color | ColorPalette> = {}
   for (const [key, token] of Object.entries(colors)) {
     result[key] = unwrapColorPaletteToken(token)
@@ -34,7 +35,7 @@ const unwrapColors = (colors: HightideDesignTokens['colors']): HightideColors &
   return result as HightideColors & Record<string, Color | ColorPalette>
 }
 
-export const createTheme = (tokens: HightideDesignTokens): Theme => ({
+export const createHightideTheme = (tokens: HightideThemeTokens): HightideTheme => ({
   colors: unwrapColors(tokens.colors),
   semantic: tokens.semanticColors,
   typography: tokens.typography,
@@ -51,5 +52,6 @@ export const createTheme = (tokens: HightideDesignTokens): Theme => ({
     multiSelect: createMultiSelectThemeFromDesign(tokens),
     chat: createChatThemeFromDesign(tokens),
     menu: createMenuThemeFromDesign(tokens),
+    avatar: createAvatarThemeFromDesign(tokens),
   },
 })

package/src/theme/themes/hightideThemes.ts

@@ -0,0 +1,14 @@
+import { ThemeTokens as designThemes } from '@helpwave/hightide-design/tokens'
+import { createHightideTheme } from './createHightideTheme'
+
+export const lightTheme = createHightideTheme(designThemes.light)
+export const darkTheme = createHightideTheme(designThemes.dark)
+
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+} as const
+
+export type HightideThemeModes = 'dark' | 'light'
+
+export type ThemeMode = string | HightideThemeModes

package/src/theme/themes/index.ts

@@ -1,2 +1,2 @@
-export * from './createTheme'
-export * from './nativeThemes'
+export * from './createHightideTheme'
+export * from './hightideThemes'

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

@@ -0,0 +1,77 @@
+import type {
+  ImageStyle,
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
+import type { ElementSize } from '@helpwave/hightide-design/types'
+
+import type { StyleResolverFunction } from '../resolver'
+
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy' | 'unknown'
+
+export type AvatarState = {
+  size?: ElementSize,
+  isGrouped?: boolean,
+  groupIndex?: number,
+}
+
+export type AvatarWithStatusState = {
+  size?: ElementSize,
+  status?: AvatarStatus,
+}
+
+export type AvatarWithLabelState = {
+  size?: ElementSize,
+}
+
+export type AvatarGroupState = {
+  size?: ElementSize,
+  count?: number,
+}
+
+export type AvatarStyle = ViewStyle
+
+export type AvatarImageStyle = ImageStyle
+
+export type AvatarTextStyle = TextStyle
+
+export type AvatarIconStyle = {
+  size: number,
+  strokeWidth: number,
+  color: string,
+}
+
+export type AvatarStatusDotStyle = ViewStyle
+
+export type AvatarWithStatusContainerStyle = ViewStyle
+
+export type AvatarWithLabelContainerStyle = ViewStyle
+
+export type AvatarWithLabelTextStyle = TextStyle
+
+export type AvatarGroupContainerStyle = ViewStyle
+
+export type AvatarGroupStackStyle = ViewStyle
+
+export type AvatarGroupMoreStyle = TextStyle
+
+export type AvatarTheme = {
+  avatar: StyleResolverFunction<AvatarState, AvatarStyle>,
+  image: StyleResolverFunction<AvatarState, AvatarImageStyle>,
+  text: StyleResolverFunction<AvatarState, AvatarTextStyle>,
+  icon: StyleResolverFunction<AvatarState, AvatarIconStyle>,
+  withStatus: {
+    container: StyleResolverFunction<AvatarWithStatusState, AvatarWithStatusContainerStyle>,
+    statusDot: StyleResolverFunction<AvatarWithStatusState, AvatarStatusDotStyle>,
+  },
+  withLabel: {
+    container: StyleResolverFunction<AvatarWithLabelState, AvatarWithLabelContainerStyle>,
+    text: StyleResolverFunction<AvatarWithLabelState, AvatarWithLabelTextStyle>,
+  },
+  group: {
+    container: StyleResolverFunction<AvatarGroupState, AvatarGroupContainerStyle>,
+    stack: StyleResolverFunction<AvatarGroupState, AvatarGroupStackStyle>,
+    more: StyleResolverFunction<AvatarGroupState, AvatarGroupMoreStyle>,
+  },
+}

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

@@ -3,7 +3,7 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 import type {
   ButtonColoringStyle,
   ElementSize

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

@@ -3,7 +3,7 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 
 import type { Color } from '../color'
 import type {

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

@@ -3,7 +3,7 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 import type {
   ChipColoringStyle,
   ElementSize

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

@@ -1,4 +1,5 @@
 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'
@@ -39,4 +40,5 @@ export type HightideComponentThemes = {
   multiSelect: MultiSelectTheme,
   chat: ChatTheme,
   menu: MenuTheme,
+  avatar: AvatarTheme,
 }

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

@@ -1,6 +1,6 @@
 import type { ViewStyle } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 import type {
   ButtonColoringStyle,
   ElementSize

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

@@ -1,3 +1,4 @@
+export * from './avatar'
 export * from './button'
 export * from './chat'
 export * from './checkbox'

package/src/theme/types/layout.ts

@@ -43,4 +43,16 @@ export type HightideLayout = {
     borderRadius: number,
     fontSize: number,
   }>,
+  avatar: Record<ElementSize, {
+    size: number,
+    padding: number,
+    fontSize: number,
+    statusDotSize: number,
+    statusDotBorderWidth: number,
+  }>,
+  avatarGroup: {
+    overlap: number,
+    maxShown: number,
+    gap: number,
+  },
 }

package/src/theme/types/theme.ts

@@ -8,10 +8,19 @@ import type { HightideLayout } from './layout'
 import type { HightideTypography } from './typography'
 
 export type Theme = {
-  colors: Record<string, unknown> & HightideColors,
-  semantic: Record<string, unknown> & HightideSemanticColors,
-  components: Record<string, unknown>  & HightideComponentThemes,
-  typography: Record<string, unknown> & HightideTypography,
-  layout: Record<string, unknown> & HightideLayout,
-  decoration: Record<string, unknown> & HightideDecoration,
+  colors: Record<string, unknown>,
+  semantic: Record<string, unknown>,
+  components: Record<string, unknown>,
+  typography: Record<string, unknown>,
+  layout: Record<string, unknown>,
+  decoration: Record<string, unknown>,
+}
+
+export type HightideTheme = Theme & {
+  colors: HightideColors & Theme['colors'],
+  semantic: HightideSemanticColors & Theme['semantic'],
+  components: HightideComponentThemes & Theme['components'],
+  typography: HightideTypography & Theme['typography'],
+  layout: HightideLayout & Theme['layout'],
+  decoration: HightideDecoration & Theme['decoration'],
 }

package/src/theme/themes/nativeThemes.ts

@@ -1,16 +0,0 @@
-import { Themes as designThemes } from '@helpwave/hightide-design/tokens'
-
-import { createTheme } from './createTheme'
-
-export const lightTheme = createTheme(designThemes.light)
-
-export const darkTheme = createTheme(designThemes.dark)
-
-export const themes = {
-  light: lightTheme,
-  dark: darkTheme,
-} as const
-
-export type HightideThemeModes = 'dark' | 'light'
-
-export type ThemeMode = string | HightideThemeModes