@helpwave/hightide-native 0.5.0 → 0.7.0

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

@@ -27,7 +27,6 @@ import type {
 import {
   createSimpleStyleResolver,
   createStyleResolver,
-  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../../types/resolver'
@@ -57,7 +56,7 @@ export const toChatThreadHeaderThemeResolvers: ComponentThemeResolver<ChatThread
     subtitle: createSimpleStyleResolver((): ChatThreadHeaderSubtitleStyle => (
       StyleAdapterUtils.text(resolve().subtitle)
     )),
-    avatar: createValueResolver((state: AvatarState): AvatarThemeResolvers => {
+    avatar: createStyleResolver((state: AvatarState): AvatarThemeResolvers => {
       const { avatarOverride } = resolve()
 
       const resolveTokens = (avatarState: AvatarState): AvatarTokens => {
@@ -89,7 +88,7 @@ export const toChatThreadHeaderThemeResolvers: ComponentThemeResolver<ChatThread
 
       return createAvatarStyleResolvers(resolveTokens, themeTokens)
     }),
-    pressable: createValueResolver(() => {
+    pressable: createStyleResolver(() => {
       const { pressableOverwrites } = resolve()
 
       const resolvePressable = (pressableState: PressableState) => componentTokens.pressable({
@@ -123,7 +122,7 @@ export const toChatThreadHeaderThemeResolvers: ComponentThemeResolver<ChatThread
           ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
           ...StyleAdapterUtils.text(pressableOverwrites.text = {}),
         })),
-        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => ({
+        icon: createStyleResolver((pressableState: PressableState): PressableIconStyle => ({
           ...StyleAdapterUtils.icon(resolvePressable(pressableState).icon),
           ...StyleAdapterUtils.icon(pressableOverwrites.icon = {}),
         })),

package/src/theme/resolvers/checkbox.ts

@@ -11,7 +11,6 @@ import type {
 } from '../types/components/checkbox'
 import {
   createStyleResolver,
-  createValueResolver,
   type ComponentThemeResolver
 } from '../types/resolver'
 
@@ -91,13 +90,14 @@ export const toCheckboxThemeResolvers: ComponentThemeResolver<CheckboxThemeResol
         right: 0,
         bottom: 0,
         left: 0,
+        zIndex: 20,
         marginTop: -vertical,
         marginRight: -horizontal,
         marginBottom: -vertical,
         marginLeft: -horizontal,
       }
     }),
-    icon: createValueResolver((state: CheckboxState): CheckboxIconStyle => (
+    icon: createStyleResolver((state: CheckboxState): CheckboxIconStyle => (
       StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }

package/src/theme/resolvers/chip.ts

@@ -7,7 +7,6 @@ import type {
 } from '../types/components/chip'
 import {
   createStyleResolver,
-  createValueResolver,
   type ComponentThemeResolver
 } from '../types/resolver'
 
@@ -32,7 +31,7 @@ export const toChipThemeResolvers: ComponentThemeResolver<ChipThemeResolvers> =
     chip: createStyleResolver((state: ChipState): ChipStyle => (
       StyleAdapterUtils.container(resolve(state).container)
     )),
-    icon: createValueResolver((state: ChipState): ChipIconStyle => (
+    icon: createStyleResolver((state: ChipState): ChipIconStyle => (
       StyleAdapterUtils.icon(resolve(state).icon)
     )),
     text: createStyleResolver((state: ChipState): ChipTextStyle => (

package/src/theme/resolvers/iconButton.ts

@@ -6,7 +6,6 @@ import type {
 } from '../types/components/iconButton'
 import {
   createStyleResolver,
-  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../types/resolver'
@@ -33,18 +32,10 @@ export const toIconButtonThemeResolvers: ComponentThemeResolver<IconButtonThemeR
     container: createStyleResolver((state: IconButtonState): IconButtonStyle => ({
       ...StyleAdapterUtils.container(resolve(state).container),
     })),
-    stateLayer: createStyleResolver((state: IconButtonState): IconButtonStyle => {
-      const tokens = resolve(state)
-      return {
-        ...StyleAdapterUtils.container(tokens.stateLayer),
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      }
-    }),
-    icon: createValueResolver((state: IconButtonState): IconButtonIconStyle => (
+    stateLayer: createStyleResolver((state: IconButtonState): IconButtonStyle => (
+      StyleAdapterUtils.container(resolve(state).stateLayer)
+    )),
+    icon: createStyleResolver((state: IconButtonState): IconButtonIconStyle => (
       StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }

package/src/theme/resolvers/index.ts

@@ -14,4 +14,5 @@ export * from './multiSelect'
 export * from './searchBar'
 export * from './select'
 export * from './switch'
+export * from './textarea'
 export * from './themedPressable'

package/src/theme/resolvers/input.ts

@@ -7,17 +7,16 @@ import type {
   InputIconStyle,
   InputPlaceholderStyle,
   InputState,
+  InputStateLayerStyle,
   InputTextStyle,
   InputThemeResolvers
 } from '../types/components/input'
 import {
   createStyleResolver,
-  createValueResolver,
   type ComponentThemeResolver
 } from '../types/resolver'
 
 import { StyleAdapterUtils } from '../adapters'
-import { HexColorUtils } from '../../utils/hex'
 
 const toDesignInputState = (state: InputState = {}): DesignInputState => {
   const active = new Set<InputStateValue>()
@@ -62,22 +61,39 @@ export const toInputThemeResolvers: ComponentThemeResolver<InputThemeResolvers>
   })
 
   return {
-    container: createStyleResolver((state: InputState): InputContainerStyle => {
-      const { container, stateLayer } = resolve(state)
-      if(container.backgroundColor && stateLayer.backgroundColor)
-        container.backgroundColor = HexColorUtils.blend(
-          HexColorUtils.resolveColorToken(container.backgroundColor),
-          HexColorUtils.resolveColorToken(stateLayer.backgroundColor)
-        )
-      return StyleAdapterUtils.container(container)
-    }),
-    text: createStyleResolver((state: InputState): InputTextStyle => (
-      StyleAdapterUtils.text(resolve(state).text)
+    container: createStyleResolver((state: InputState): InputContainerStyle => (
+      StyleAdapterUtils.container(resolve(state).container)
     )),
+    stateLayer: createStyleResolver((state: InputState): InputStateLayerStyle => {
+      const style = resolve(state)
+      const stateLayer = style.stateLayer
+      const container = style.container
+      const resolvedContainerBorder = StyleAdapterUtils.borderWidth(container.border?.width)
+      return {
+        ...StyleAdapterUtils.container(stateLayer),
+        ...StyleAdapterUtils.position({
+          type: 'absolute',
+          zIndex: stateLayer.position?.zIndex ?? 20,
+          bottom: -(resolvedContainerBorder?.borderBottomWidth ?? 0),
+          top: -(resolvedContainerBorder?.borderTopWidth ?? 0),
+          left: -(resolvedContainerBorder?.borderLeftWidth ?? 0),
+          right: -(resolvedContainerBorder?.borderRightWidth ?? 0),
+        })
+      }
+    }),
+    text: createStyleResolver((state: InputState): InputTextStyle => {
+      const style = resolve(state).text
+      return {
+        ...StyleAdapterUtils.text(style),
+        flex: 1,
+        padding: 0,
+        margin: 0,
+      }
+    }),
     placeholder: createStyleResolver((state: InputState): InputPlaceholderStyle => (
       StyleAdapterUtils.text(resolve(state).placeholder)
     )),
-    icon: createValueResolver((state: InputState): InputIconStyle => (
+    icon: createStyleResolver((state: InputState): InputIconStyle => (
       StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }

package/src/theme/resolvers/listItem.ts

@@ -21,7 +21,6 @@ import type {
 } from '../types/components/listItem'
 import {
   createStyleResolver,
-  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../types/resolver'
@@ -61,7 +60,7 @@ const toListItemDefaultThemeResolvers: ComponentThemeResolver<ListItemDefaultThe
     titleText: createStyleResolver((state: ListItemState): ListItemTitleStyle => (
       StyleAdapterUtils.text(resolve(state).titleText)
     )),
-    icon: createValueResolver((state: ListItemState): ListItemIconStyle => (
+    icon: createStyleResolver((state: ListItemState): ListItemIconStyle => (
       StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }
@@ -101,7 +100,7 @@ const toListActionItemThemeResolvers: ComponentThemeResolver<ListActionItemTheme
     descriptionText: createStyleResolver((state: ListActionItemState): ListActionItemDescriptionStyle => (
       StyleAdapterUtils.text(resolve(state).descriptionText)
     )),
-    icon: createValueResolver((state: ListActionItemState): ListActionItemIconStyle => (
+    icon: createStyleResolver((state: ListActionItemState): ListActionItemIconStyle => (
       StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }

package/src/theme/resolvers/multiSelect.ts

@@ -23,7 +23,6 @@ import type {
 import {
   createSimpleStyleResolver,
   createStyleResolver,
-  createValueResolver,
   type ComponentThemeResolver
 } from '../types/resolver'
 
@@ -135,7 +134,6 @@ export const toMultiSelectThemeResolvers: ComponentThemeResolver<MultiSelectThem
     )),
     overlay: createSimpleStyleResolver((): SelectOverlayStyle => ({
       ...StyleAdapterUtils.container(resolve().overlay),
-      flex: 1,
     })),
     menu: createStyleResolver((state: SelectMenuState): SelectMenuStyle => (
       StyleAdapterUtils.container(resolve({ hasSearch: state.hasSearch }).menu)
@@ -170,7 +168,7 @@ export const toMultiSelectThemeResolvers: ComponentThemeResolver<MultiSelectThem
         isHighlighted: state.isHighlighted,
       }).checkbox)
     )),
-    checkboxIcon: createValueResolver((state: MultiSelectOptionState): MultiSelectCheckboxIconStyle => (
+    checkboxIcon: createStyleResolver((state: MultiSelectOptionState): MultiSelectCheckboxIconStyle => (
       StyleAdapterUtils.icon(resolve({
         color: state.color,
         isDisabled: state.isDisabled,

package/src/theme/resolvers/searchBar.ts

@@ -13,7 +13,6 @@ import type {
 } from '../types/components/searchBar'
 import {
   createStyleResolver,
-  createValueResolver,
   type ComponentThemeResolver
 } from '../types/resolver'
 
@@ -114,7 +113,7 @@ export const toSearchBarThemeResolvers: ComponentThemeResolver<SearchBarThemeRes
         transform: [{ translateY: '-50%' }],
       }
     }),
-    iconButtonColor: createValueResolver((state: SearchBarState): ColorPairToken => {
+    iconButtonColor: createStyleResolver((state: SearchBarState): ColorPairToken => {
       const iconColor = resolve(state).icon.color
 
       return {

package/src/theme/resolvers/select.ts

@@ -20,7 +20,6 @@ import type {
 import {
   createSimpleStyleResolver,
   createStyleResolver,
-  createValueResolver,
   type ComponentThemeResolver
 } from '../types/resolver'
 
@@ -128,7 +127,7 @@ export const toSelectThemeResolvers: ComponentThemeResolver<SelectThemeResolvers
     triggerText: createStyleResolver((state: SelectState): SelectTriggerTextStyle => (
       StyleAdapterUtils.text(resolve(toTriggerState(state)).triggerText)
     )),
-    icon: createValueResolver((state: SelectState): SelectIconStyle => (
+    icon: createStyleResolver((state: SelectState): SelectIconStyle => (
       StyleAdapterUtils.icon(resolve(toTriggerState(state)).icon)
     )),
     overlay: createSimpleStyleResolver((): SelectOverlayStyle => ({

package/src/theme/resolvers/textarea.ts

@@ -0,0 +1,14 @@
+import type { InputThemeResolvers } from '../types/components/input'
+import type { ComponentThemeResolver } from '../types/resolver'
+
+import { toInputThemeResolvers } from './input'
+
+export const toTextareaThemeResolvers: ComponentThemeResolver<InputThemeResolvers> = (params) => (
+  toInputThemeResolvers({
+    ...params,
+    componentTokens: {
+      ...params.componentTokens,
+      input: params.componentTokens.textarea,
+    },
+  })
+)

package/src/theme/resolvers/themedPressable.ts

@@ -7,7 +7,6 @@ import type {
 } from '../types/components/themedPressable'
 import {
   createStyleResolver,
-  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../types/resolver'
@@ -35,21 +34,11 @@ export const toThemedPressableThemeResolvers: ComponentThemeResolver<ThemedPress
   return {
     container: createStyleResolver((state: ThemedPressableState): ThemedPressableStyle => ({
       ...StyleAdapterUtils.container(resolve(state).container),
-      alignSelf: 'flex-start',
     })),
-    stateLayer: createStyleResolver((state: ThemedPressableState): ThemedPressableStyle => {
-      const tokens = resolve(state)
-
-      return {
-        ...StyleAdapterUtils.container(tokens.stateLayer),
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      }
-    }),
-    icon: createValueResolver((state: ThemedPressableState): ThemedPressableIconStyle => (
+    stateLayer: createStyleResolver((state: ThemedPressableState): ThemedPressableStyle => (
+      StyleAdapterUtils.container(resolve(state).stateLayer)
+    )),
+    icon: createStyleResolver((state: ThemedPressableState): ThemedPressableIconStyle => (
       StyleAdapterUtils.icon(resolve(state).icon)
     )),
     text: createStyleResolver((state: ThemedPressableState): ThemedPressableTextStyle => (

package/src/theme/themes/createHightideTheme.ts

@@ -29,6 +29,7 @@ import {
 import { toMultiSelectThemeResolvers } from '../resolvers/multiSelect'
 import { toSelectThemeResolvers } from '../resolvers/select'
 import { toSwitchThemeResolvers } from '../resolvers/switch'
+import { toTextareaThemeResolvers } from '../resolvers/textarea'
 import { toThemedPressableThemeResolvers } from '../resolvers/themedPressable'
 import type { HightideThemeSemantics } from '../types/semantics'
 import type { HightideTheme } from '../types/theme'
@@ -172,6 +173,11 @@ export const createHightideTheme = (themeTokens: ThemeTokens): HightideTheme =>
       semanticTokens: hightideSemanticTokenResolvers,
       componentTokens: componentTokenResolvers,
     }),
+    textarea: toTextareaThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
     searchBar: toSearchBarThemeResolvers({
       themeTokens,
       semanticTokens: hightideSemanticTokenResolvers,

package/src/theme/themes/hightideThemes.ts

@@ -13,6 +13,8 @@ export const themes = {
   dark: hightideDarkTheme,
 } as const
 
-export type HightideThemeModes = 'dark' | 'light'
+import type { HightideThemeModes } from '../../enums/hightideThemeModes'
+
+export type { HightideThemeModes }
 
 export type ThemeMode = string | HightideThemeModes

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

@@ -11,13 +11,15 @@ import type {
   StyleResolverFunction
 } from '../resolver'
 import type { IconStyle } from '../../../icons'
-import type { ThemedPressableState } from './themedPressable'
+import type { ThemedPressableState, ThemedPressableThemeResolvers } from './themedPressable'
 import type {
   AvatarState,
   AvatarThemeResolvers
 } from './avatar'
 
-export type ChatMessageDirection = 'incoming' | 'outgoing'
+import type { ChatMessageDirection } from '../../../enums/chatMessageDirection'
+
+export type { ChatMessageDirection }
 
 export type ChatConversationRowState = InteractionState & {
   isUnread?: boolean,
@@ -147,25 +149,8 @@ export type ChatThreadHeaderThemeResolvers = {
     AvatarThemeResolvers
   >,
   pressable: StyleResolverFunction<
-    Record<string, never>,
-    {
-      container: StyleResolverFunction<
-        PressableState,
-        PressableContainerStyle
-      >,
-      stateLayer: StyleResolverFunction<
-        PressableState,
-        PressableStateLayerStyle
-      >,
-      text: StyleResolverFunction<
-        PressableState,
-        PressableTextStyle
-      >,
-      icon: StyleResolverFunction<
-        PressableState,
-        PressableIconStyle
-      >,
-    }
+    ThemedPressableState,
+    ThemedPressableThemeResolvers
   >,
 }
 

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

@@ -19,6 +19,7 @@ import type { ListItemThemeResolvers } from './listItem'
 import type { MultiSelectThemeResolvers } from './multiSelect'
 import type { SelectThemeResolvers } from './select'
 import type { SwitchThemeResolvers } from './switch'
+import type { TextareaThemeResolvers } from './textarea'
 import type { ThemedPressableThemeResolvers } from './themedPressable'
 
 export type IconThemeResolvers = Record<IconSize, IconTokens>
@@ -31,6 +32,7 @@ export type HightideComponentThemes = {
   checkbox: CheckboxThemeResolvers,
   switch: SwitchThemeResolvers,
   input: InputThemeResolvers,
+  textarea: TextareaThemeResolvers,
   searchBar: SearchBarThemeResolvers,
   select: SelectThemeResolvers,
   multiSelect: MultiSelectThemeResolvers,

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

@@ -13,4 +13,5 @@ export * from './multiSelect'
 export * from './searchBar'
 export * from './select'
 export * from './switch'
+export * from './textarea'
 export * from './themedPressable'

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

@@ -14,6 +14,8 @@ export type InputState = InteractionState & {
 
 export type InputContainerStyle = ViewStyle
 
+export type InputStateLayerStyle = ViewStyle
+
 export type InputTextStyle = TextStyle
 
 export type InputPlaceholderStyle = TextStyle
@@ -22,6 +24,7 @@ export type InputIconStyle = IconStyle
 
 export type InputThemeResolvers = {
   container: StyleResolverFunction<InputState, InputContainerStyle>,
+  stateLayer: StyleResolverFunction<InputState, InputStateLayerStyle>,
   text: StyleResolverFunction<InputState, InputTextStyle>,
   placeholder: StyleResolverFunction<InputState, InputPlaceholderStyle>,
   icon: StyleResolverFunction<InputState, InputIconStyle>,

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

@@ -0,0 +1,9 @@
+export type {
+  InputContainerStyle as TextareaContainerStyle,
+  InputIconStyle as TextareaIconStyle,
+  InputPlaceholderStyle as TextareaPlaceholderStyle,
+  InputState as TextareaState,
+  InputStateLayerStyle as TextareaStateLayerStyle,
+  InputTextStyle as TextareaTextStyle,
+  InputThemeResolvers as TextareaThemeResolvers
+} from './input'

package/src/theme/types/resolver.ts

@@ -5,6 +5,7 @@ import type {
   PressableState,
   PressableStateValue
 } from '@helpwave/hightide-design/component-token-resolvers'
+import type { StyleProp } from 'react-native'
 
 export type InteractionState = {
   isDisabled?: boolean,
@@ -41,12 +42,12 @@ export const toPressableInteractionState = (
 }
 
 export type StyleOverwrite<TState, TStyle> =
-  TStyle | ((state: TState, prev: TStyle) => TStyle)
+  StyleProp<TStyle> | ((state: TState, prev: TStyle) => StyleProp<TStyle>)
 
 export type StyleResolverFunction<TState, TStyle> = (
   props: TState,
   overwrite?: StyleOverwrite<TState, TStyle>,
-) => TStyle
+) => StyleProp<TStyle>
 
 export type SimpleStyleResolver<TStyle> = StyleResolverFunction<Record<string, never>, TStyle>
 
@@ -70,7 +71,7 @@ export const createStyleResolver = <TState, TStyle>(
       return (overwrite as (state: TState, prev: TStyle) => TStyle)(props, base)
     }
 
-    return [base, overwrite] as TStyle
+    return [base, overwrite]
   }
 }
 
@@ -79,27 +80,3 @@ export const createSimpleStyleResolver = <TStyle>(
 ): SimpleStyleResolver<TStyle> => {
   return createStyleResolver<Record<string, never>, TStyle>(resolve)
 }
-
-export const createValueResolver = <TState, TValue>(
-  resolve: (props: TState) => TValue
-): StyleResolverFunction<TState, TValue> => {
-  return (props, overwrite) => {
-    const base = resolve(props)
-
-    if (overwrite === undefined) {
-      return base
-    }
-
-    if (typeof overwrite === 'function') {
-      return (overwrite as (state: TState, prev: TValue) => TValue)(props, base)
-    }
-
-    return overwrite
-  }
-}
-
-export const createSimpleValueResolver = <TValue>(
-  resolve: () => TValue
-): SimpleStyleResolver<TValue> => {
-  return createValueResolver<Record<string, never>, TValue>(resolve)
-}

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './hex'
 export * from './hitBoxOverlay'
 export * from './minimumTouchTargetHitSlop'
+export * from './pressableInteraction'

package/src/utils/pressableInteraction.ts

@@ -0,0 +1,7 @@
+import type { PressableStateCallbackType } from 'react-native'
+
+export type PressableInteractionState = PressableStateCallbackType & {
+  hovered?: boolean,
+  focused?: boolean,
+  focusVisible?: boolean,
+}