@helpwave/hightide-native 0.0.5 → 0.0.7

package/src/theme/resolvers/button.ts

@@ -8,21 +8,21 @@ import {
   fontWeights
 } from '@helpwave/hightide-design/tokens'
 import type {
-  HightideDesignTokens as DesignTokensTheme,
+  HightideThemeTokens as DesignTokensTheme,
   ElementSize
 } from '@helpwave/hightide-design/types'
 
 import {
   isOutlineColoringStyle,
   resolveColoringStyles
-} from '@/src/theme/resolvers/coloring'
-import type { HightideSemanticColors } from '@/src/theme/types/color'
+} from './coloring'
+import type { HightideSemanticColors } from '../types/color'
 import type {
   ButtonState,
   ButtonTheme
-} from '@/src/theme/types/components/button'
-import type { HightideComponentThemes } from '@/src/theme/types/components/hightide'
-import { createStyleResolver } from '@/src/theme/types/resolver'
+} from '../types/components/button'
+import type { HightideComponentThemes } from '../types/components/hightide'
+import { createStyleResolver } from '../types/resolver'
 
 const buttonFontSizes: Record<ElementSize, number> = {
   xs: 12,

package/src/theme/resolvers/chat.ts

@@ -4,17 +4,17 @@ 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 {
   Color,
   HightideSemanticColors
-} from '@/src/theme/types/color'
+} from '../types/color'
 import type {
   ChatAttachmentCardState,
   ChatConversationRowState,
@@ -23,12 +23,12 @@ import type {
   ChatQuickReplyChipState,
   ChatSystemLineState,
   ChatTheme
-} from '@/src/theme/types/components/chat'
-import type { HightideComponentThemes } from '@/src/theme/types/components/hightide'
+} from '../types/components/chat'
+import type { HightideComponentThemes } from '../types/components/hightide'
 import {
   createStyleResolver,
   createValueResolver
-} from '@/src/theme/types/resolver'
+} from '../types/resolver'
 
 export type CreateChatThemeOptions = {
   semantic: HightideSemanticColors,

package/src/theme/resolvers/checkbox.ts

@@ -3,20 +3,20 @@ 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'
 
-import type { HightideSemanticColors } from '@/src/theme/types/color'
+import type { HightideSemanticColors } from '../types/color'
 import type {
   CheckboxSize,
   CheckboxState,
   CheckboxTheme
-} from '@/src/theme/types/components/checkbox'
+} from '../types/components/checkbox'
 import {
   createStyleResolver,
   createValueResolver
-} from '@/src/theme/types/resolver'
+} from '../types/resolver'
 
 const checkboxSizes: Record<CheckboxSize, number> = {
   sm: 20,

package/src/theme/resolvers/chip.ts

@@ -7,16 +7,16 @@ 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 '@/src/theme/resolvers/coloring'
-import type { HightideSemanticColors } from '@/src/theme/types/color'
+import { resolveColoringStyles } from './coloring'
+import type { HightideSemanticColors } from '../types/color'
 import type {
   ChipState,
   ChipTheme
-} from '@/src/theme/types/components/chip'
-import type { HightideComponentThemes } from '@/src/theme/types/components/hightide'
-import { createStyleResolver } from '@/src/theme/types/resolver'
+} from '../types/components/chip'
+import type { HightideComponentThemes } from '../types/components/hightide'
+import { createStyleResolver } from '../types/resolver'
 
 export type CreateChipThemeOptions = {
   semantic: HightideSemanticColors,

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,
@@ -11,9 +11,9 @@ import type {
 import type {
   Color,
   HightideSemanticColors
-} from '@/src/theme/types/color'
-import type { ColoringDefinition } from '@/src/theme/types/components/hightide'
-import type { InteractionState } from '@/src/theme/types/resolver'
+} from '../types/color'
+import type { ColoringDefinition } from '../types/components/hightide'
+import type { InteractionState } from '../types/resolver'
 
 export type ResolvedColoringStyles = {
   backgroundColor: Color | 'transparent',

package/src/theme/resolvers/iconButton.ts

@@ -1,22 +1,22 @@
 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,
   resolveColoringStyles
-} from '@/src/theme/resolvers/coloring'
-import type { HightideSemanticColors } from '@/src/theme/types/color'
-import type { HightideComponentThemes } from '@/src/theme/types/components/hightide'
+} from './coloring'
+import type { HightideSemanticColors } from '../types/color'
+import type { HightideComponentThemes } from '../types/components/hightide'
 import type {
   IconButtonState,
   IconButtonTheme
-} from '@/src/theme/types/components/iconButton'
+} from '../types/components/iconButton'
 import {
   createStyleResolver,
   createValueResolver
-} from '@/src/theme/types/resolver'
+} from '../types/resolver'
 
 export type CreateIconButtonThemeOptions = {
   semantic: HightideSemanticColors,

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,18 +3,18 @@ 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 '@/src/theme/types/color'
+import type { HightideSemanticColors } from '../types/color'
 import type {
   InputState,
   InputTheme
-} from '@/src/theme/types/components/input'
+} from '../types/components/input'
 import {
   createStyleResolver,
   createValueResolver
-} from '@/src/theme/types/resolver'
+} from '../types/resolver'
 
 export type CreateInputThemeOptions = {
   semantic: HightideSemanticColors,

package/src/theme/resolvers/menu.ts

@@ -3,18 +3,18 @@ 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 '@/src/theme/types/color'
+import type { HightideSemanticColors } from '../types/color'
 import type {
   MenuActionItemState,
   MenuTheme
-} from '@/src/theme/types/components/menu'
+} from '../types/components/menu'
 import {
   createStyleResolver,
   createValueResolver
-} from '@/src/theme/types/resolver'
+} from '../types/resolver'
 
 export type CreateMenuThemeOptions = {
   semantic: HightideSemanticColors,

package/src/theme/resolvers/multiSelect.ts

@@ -1,19 +1,19 @@
 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 '@/src/theme/types/color'
+import type { HightideSemanticColors } from '../types/color'
 import type {
   MultiSelectOptionState,
   MultiSelectState,
   MultiSelectTheme
-} from '@/src/theme/types/components/multiSelect'
+} from '../types/components/multiSelect'
 import {
   createStyleResolver,
   createValueResolver
-} from '@/src/theme/types/resolver'
+} from '../types/resolver'
 
 export type CreateMultiSelectThemeOptions = {
   semantic: HightideSemanticColors,

package/src/theme/resolvers/select.ts

@@ -1,19 +1,19 @@
 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 '@/src/theme/types/color'
+import type { HightideSemanticColors } from '../types/color'
 import type {
   SelectOptionState,
   SelectState,
   SelectTheme
-} from '@/src/theme/types/components/select'
+} from '../types/components/select'
 import {
   createStyleResolver,
   createValueResolver
-} from '@/src/theme/types/resolver'
+} from '../types/resolver'
 
 export type CreateSelectThemeOptions = {
   semantic: HightideSemanticColors,

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

@@ -1,23 +1,24 @@
 import type {
   ColorPaletteToken,
-  HightideDesignTokens
+  HightideThemeTokens
 } from '@helpwave/hightide-design/types'
 
-import { createButtonThemeFromDesign } from '@/src/theme/resolvers/button'
-import { createChatThemeFromDesign } from '@/src/theme/resolvers/chat'
-import { createCheckboxThemeFromDesign } from '@/src/theme/resolvers/checkbox'
-import { createChipThemeFromDesign } from '@/src/theme/resolvers/chip'
-import { createIconButtonThemeFromDesign } from '@/src/theme/resolvers/iconButton'
-import { createInputThemeFromDesign } from '@/src/theme/resolvers/input'
-import { createMenuThemeFromDesign } from '@/src/theme/resolvers/menu'
-import { createMultiSelectThemeFromDesign } from '@/src/theme/resolvers/multiSelect'
-import { createSelectThemeFromDesign } from '@/src/theme/resolvers/select'
+import { createAvatarThemeFromDesign } from '../resolvers/avatar'
+import { createButtonThemeFromDesign } from '../resolvers/button'
+import { createChatThemeFromDesign } from '../resolvers/chat'
+import { createCheckboxThemeFromDesign } from '../resolvers/checkbox'
+import { createChipThemeFromDesign } from '../resolvers/chip'
+import { createIconButtonThemeFromDesign } from '../resolvers/iconButton'
+import { createInputThemeFromDesign } from '../resolvers/input'
+import { createMenuThemeFromDesign } from '../resolvers/menu'
+import { createMultiSelectThemeFromDesign } from '../resolvers/multiSelect'
+import { createSelectThemeFromDesign } from '../resolvers/select'
 import type {
   Color,
   ColorPalette,
   HightideColors
-} from '@/src/theme/types/color'
-import type { Theme } from '@/src/theme/types/theme'
+} from '../types/color'
+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
@@ -12,7 +12,7 @@ import type {
 import type {
   InteractionState,
   StyleResolverFunction
-} from '@/src/theme/types/resolver'
+} from '../resolver'
 
 export type ButtonState = InteractionState & {
   size?: ElementSize,

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

@@ -3,13 +3,13 @@ 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 '@/src/theme/types/color'
+import type { Color } from '../color'
 import type {
   InteractionState,
   StyleResolverFunction
-} from '@/src/theme/types/resolver'
+} from '../resolver'
 
 export type ChatMessageDirection = 'incoming' | 'outgoing'
 

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

@@ -2,11 +2,11 @@ import type { ViewStyle } from 'react-native'
 
 import type { ElementSize } from '@helpwave/hightide-design/types'
 
-import type { Color } from '@/src/theme/types/color'
+import type { Color } from '../color'
 import type {
   InteractionState,
   StyleResolverFunction
-} from '@/src/theme/types/resolver'
+} from '../resolver'
 
 export type CheckboxSize = 'sm' | 'md' | 'lg'
 

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
@@ -12,7 +12,7 @@ import type {
 import type {
   InteractionState,
   StyleResolverFunction
-} from '@/src/theme/types/resolver'
+} from '../resolver'
 
 export type ChipState = InteractionState & {
   size?: ElementSize,

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

@@ -1,13 +1,14 @@
-import type { Color } from '@/src/theme/types/color'
-import type { ButtonTheme } from '@/src/theme/types/components/button'
-import type { ChatTheme } from '@/src/theme/types/components/chat'
-import type { CheckboxTheme } from '@/src/theme/types/components/checkbox'
-import type { ChipTheme } from '@/src/theme/types/components/chip'
-import type { IconButtonTheme } from '@/src/theme/types/components/iconButton'
-import type { InputTheme } from '@/src/theme/types/components/input'
-import type { MenuTheme } from '@/src/theme/types/components/menu'
-import type { MultiSelectTheme } from '@/src/theme/types/components/multiSelect'
-import type { SelectTheme } from '@/src/theme/types/components/select'
+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'
 
 export type ColoringDefinition = {
   color: Color,
@@ -39,4 +40,5 @@ export type HightideComponentThemes = {
   multiSelect: MultiSelectTheme,
   chat: ChatTheme,
   menu: MenuTheme,
+  avatar: AvatarTheme,
 }

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

@@ -1,16 +1,16 @@
 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
 } from '@helpwave/hightide-design/types'
 
-import type { Color } from '@/src/theme/types/color'
+import type { Color } from '../color'
 import type {
   InteractionState,
   StyleResolverFunction
-} from '@/src/theme/types/resolver'
+} from '../resolver'
 
 export type IconButtonState = InteractionState & {
   size?: 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/components/input.ts

@@ -1,10 +1,10 @@
 import type { TextStyle } from 'react-native'
 
-import type { Color } from '@/src/theme/types/color'
+import type { Color } from '../color'
 import type {
   InteractionState,
   StyleResolverFunction
-} from '@/src/theme/types/resolver'
+} from '../resolver'
 
 export type InputState = InteractionState & {
   isInvalid?: boolean,

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

@@ -3,11 +3,11 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { Color } from '@/src/theme/types/color'
+import type { Color } from '../color'
 import type {
   InteractionState,
   StyleResolverFunction
-} from '@/src/theme/types/resolver'
+} from '../resolver'
 
 export type MenuSectionStyle = ViewStyle
 

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

@@ -3,7 +3,7 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { Color } from '@/src/theme/types/color'
+import type { Color } from '../color'
 import type {
   SelectMenuStyle,
   SelectOptionState,
@@ -11,8 +11,8 @@ import type {
   SelectSearchStyle,
   SelectState,
   SelectTriggerTextStyle
-} from '@/src/theme/types/components/select'
-import type { StyleResolverFunction } from '@/src/theme/types/resolver'
+} from './select'
+import type { StyleResolverFunction } from '../resolver'
 
 export type MultiSelectState = SelectState & {
   hasSelections?: boolean,

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

@@ -3,11 +3,11 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { Color } from '@/src/theme/types/color'
+import type { Color } from '../color'
 import type {
   InteractionState,
   StyleResolverFunction
-} from '@/src/theme/types/resolver'
+} from '../resolver'
 
 export type SelectState = InteractionState & {
   isInvalid?: boolean,

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,
+  },
 }