@helpwave/hightide-native 0.4.0 → 0.6.0

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "files": [
     "src"
@@ -39,12 +39,16 @@
     "./types": {
       "types": "./src/types/index.ts",
       "default": "./src/types/index.ts"
+    },
+    "./utils": {
+      "types": "./src/utils/index.ts",
+      "default": "./src/utils/index.ts"
     }
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-utils": "0.1.0",
-    "@helpwave/hightide-design": "0.4.0"
+    "@helpwave/hightide-design": "0.6.0",
+    "@helpwave/hightide-utils": "0.1.0"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",

package/src/components/chat/ChatAttachmentMessageBubble.tsx

@@ -39,6 +39,7 @@ export type ChatAttachmentMessageBubbleProps = Omit<ChatMessageBubbleProps, 'chi
   icon?: ReactNode,
   downloadLabel?: string,
   onDownload?: () => void,
+  style: ChatMessageBubbleProps['style'],
   contentContainerStyle?: StyleOverwrite<
     PressableState,
     PressableContainerStyle
@@ -89,7 +90,6 @@ export const ChatAttachmentMessageBubble = ({
   timestamp,
   readReceipt,
   style,
-  containerStyle,
   bodyStyle,
   bodyTextStyle,
   metaDataContainerStyle,
@@ -137,9 +137,9 @@ export const ChatAttachmentMessageBubble = ({
   const resolvedContainerStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleContainerStyle>(
       bubbleOverrides.container(state),
-      containerStyle
+      style
     ),
-    [bubbleOverrides, state, containerStyle]
+    [bubbleOverrides, state, style]
   )
   const resolvedBodyStyle = useMemo(
     () => mergeBubbleStyleOverwrite<ChatMessageBubbleBodyStyle>(
@@ -183,8 +183,7 @@ export const ChatAttachmentMessageBubble = ({
       direction={direction}
       timestamp={timestamp}
       readReceipt={readReceipt}
-      style={style}
-      containerStyle={resolvedContainerStyle}
+      style={resolvedContainerStyle}
       bodyStyle={resolvedBodyStyle}
       bodyTextStyle={resolvedBodyTextStyle}
       metaDataContainerStyle={resolvedMetaDataContainerStyle}
@@ -219,7 +218,7 @@ export const ChatAttachmentMessageBubble = ({
             />
           )}
         </View>
-        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <View style={{ gap: theme.spacing.xs }}>
           {typeof name === 'string' || typeof name === 'number' ? (
             <ThemedText style={resolvedFileNameTextStyle} numberOfLines={1}>{name}</ThemedText>
           ) : (

package/src/components/chat/ChatMessageBubble.tsx

@@ -4,9 +4,7 @@ import {
 } from 'react'
 import {
   View,
-  type StyleProp,
-  type ViewProps,
-  type ViewStyle
+  type ViewProps
 } from 'react-native'
 import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
@@ -31,8 +29,7 @@ export type ChatMessageBubbleProps = Omit<ViewProps, 'children' | 'style'> & {
   timestamp: ReactNode,
   readReceipt?: ReactNode,
   children?: ReactNode,
-  style?: StyleProp<ViewStyle>,
-  containerStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
+  style?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
   bodyStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleBodyStyle>,
   bodyTextStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleBodyTextStyle>,
   metaDataContainerStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleMetaDataContainerStyle>,
@@ -46,7 +43,6 @@ export const ChatMessageBubble = ({
   readReceipt,
   children,
   style,
-  containerStyle,
   bodyStyle,
   bodyTextStyle,
   metaDataContainerStyle,
@@ -58,8 +54,8 @@ export const ChatMessageBubble = ({
   const state = useMemo(() => ({ direction }), [direction])
 
   const resolvedContainerStyle = useMemo(
-    () => theme.components.chat.messageBubble.container(state, containerStyle),
-    [theme, state, containerStyle]
+    () => theme.components.chat.messageBubble.container(state, style),
+    [theme, state, style]
   )
   const resolvedBodyStyle = useMemo(
     () => theme.components.chat.messageBubble.body(state, bodyStyle),
@@ -87,7 +83,7 @@ export const ChatMessageBubble = ({
   )
 
   return (
-    <View {...props} style={[resolvedContainerStyle, style]}>
+    <View {...props} style={resolvedContainerStyle}>
       <View style={resolvedBodyStyle}>
         {typeof children === 'string' || typeof children === 'number' ? (
           <ThemedText style={resolvedBodyTextStyle}>{children}</ThemedText>

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

@@ -3,11 +3,12 @@ import {
   useMemo,
   useState
 } from 'react'
+import type {
+  TextStyle } from 'react-native'
 import {
+  StyleSheet,
   TextInput,
-  type StyleProp,
-  type TextInputProps,
-  type TextStyle
+  type TextInputProps
 } from 'react-native'
 
 import {
@@ -51,8 +52,7 @@ export type InputProps = Omit<TextInputProps, 'value' | 'style'>
     color?: ColorPairToken,
     editCompleteOptions?: EditCompleteOptions,
     initialValue?: string,
-    style?: StyleProp<TextStyle>,
-    containerStyle?: StyleOverwrite<InputState, InputContainerStyle>,
+    style?:  StyleOverwrite<InputState, InputContainerStyle>,
     textStyle?: StyleOverwrite<InputState, InputTextStyle>,
   }
 
@@ -68,7 +68,6 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
   onEditComplete,
   editCompleteOptions,
   style,
-  containerStyle,
   textStyle,
   ...props
 }, ref) {
@@ -108,8 +107,8 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
   }), [color, disabled, invalid, readOnly, interactive, isHovered, isPressed, isFocused])
 
   const resolvedContainerStyle = useMemo(
-    () => theme.components.input.container(state, containerStyle),
-    [theme, state, containerStyle]
+    () => theme.components.input.container(state, style),
+    [theme, state, style]
   )
   const resolvedTextStyle = useMemo(
     () => theme.components.input.text(state, textStyle),
@@ -120,6 +119,21 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
     [theme, state]
   )
 
+
+  const resolvedStyle = useMemo(
+    () => {
+      const resolvedSheet: TextStyle = StyleSheet.flatten<TextStyle>([
+        resolvedContainerStyle,
+        resolvedTextStyle,
+      ])
+      // this is required for android to work
+      // TODO find a better solution like separating container and text input
+      delete resolvedSheet['boxShadow']
+      return resolvedSheet
+    },
+    [resolvedContainerStyle, resolvedTextStyle]
+  )
+
   return (
     <TextInput
       {...props}
@@ -175,7 +189,7 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
         }
       }}
       placeholderTextColor={resolvedPlaceholderStyle.color}
-      style={[resolvedContainerStyle, resolvedTextStyle, style]}
+      style={resolvedStyle}
       accessibilityState={{ disabled, selected: required }}
     />
   )

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

@@ -36,7 +36,7 @@ export type MultiSelectProps = Partial<FormFieldDataHandling<string[]>>
     value?: string[],
     initialValue?: string[],
     placeholder?: string,
-    showSearch?: boolean,
+    searchableThreshold?: number,
     color?: ColorPairToken,
     style?: StyleProp<ViewStyle>,
   }
@@ -46,7 +46,7 @@ export const MultiSelect = ({
   value: controlledValue,
   initialValue = [],
   placeholder = 'Select…',
-  showSearch = true,
+  searchableThreshold = 6,
   color,
   disabled = false,
   readOnly = false,
@@ -67,6 +67,8 @@ export const MultiSelect = ({
     onEditComplete,
   })
 
+  const isSearchVisible = options.length >= searchableThreshold
+
   const selectedOptions = useMemo(() => {
     return options.filter((option) => multiSelect.isSelected(option.id))
   }, [multiSelect, options])
@@ -88,8 +90,8 @@ export const MultiSelect = ({
     [multiSelectTheme]
   )
   const resolvedMenuStyle = useMemo(
-    () => multiSelectTheme.menu({ hasSearch: showSearch }),
-    [multiSelectTheme, showSearch]
+    () => multiSelectTheme.menu({ hasSearch: isSearchVisible }),
+    [multiSelectTheme, isSearchVisible]
   )
   const resolvedHeaderStyle = useMemo(
     () => multiSelectTheme.header({}),
@@ -103,7 +105,7 @@ export const MultiSelect = ({
     () => options.filter((option) => multiSelect.visibleOptionIds.includes(option.id)),
     [options, multiSelect.visibleOptionIds]
   )
-  const showEmptySearchResults = showSearch
+  const showEmptySearchResults = isSearchVisible
     && multiSelect.searchQuery.trim().length > 0
     && visibleOptions.length === 0
 
@@ -160,6 +162,7 @@ export const MultiSelect = ({
                             style={{
                               position: 'relative',
                               width: theme.icongraphy.sizes.sm,
+                              height: theme.icongraphy.sizes.sm,
                             }}
                           >
                             <IconButton
@@ -210,7 +213,7 @@ export const MultiSelect = ({
             style={resolvedMenuStyle}
             onPress={(event) => event.stopPropagation()}
           >
-            {showSearch && (
+            {isSearchVisible && (
               <View style={resolvedHeaderStyle}>
                 <SearchBar
                   value={multiSelect.searchQuery}
@@ -260,7 +263,8 @@ export const MultiSelect = ({
                         <View style={multiSelectTheme.checkbox(optionState)}>
                           <ThemedIcon
                             icon={HightideIconRegistry.Check}
-                            size="sm"
+                            size={checkboxIcon.size}
+                            strokeWidth={checkboxIcon.strokeWidth}
                             color={checkboxIcon.color}
                           />
                         </View>

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

@@ -20,7 +20,6 @@ import {
   type UseSelectOption
 } from '../../hooks/useSelect'
 import type { SelectState } from '../../theme/types/components/select'
-import type { Color } from '../../theme/types/color'
 import type {
   FormFieldDataHandling,
   FormFieldInteractionStates
@@ -38,7 +37,7 @@ export type SelectProps = Partial<FormFieldDataHandling<string>>
     value?: string | null,
     initialValue?: string | null,
     placeholder?: string,
-    showSearch?: boolean,
+    searchableThreshold?: number,
     color?: ColorPairToken,
     style?: StyleProp<ViewStyle>,
   }
@@ -48,7 +47,7 @@ export const Select = ({
   value: controlledValue,
   initialValue = null,
   placeholder = 'Select…',
-  showSearch = true,
+  searchableThreshold = 6,
   color,
   disabled = false,
   readOnly = false,
@@ -69,6 +68,8 @@ export const Select = ({
     onEditComplete,
   })
 
+  const isSearchVisible = options.length >= searchableThreshold
+
   const selectedLabel = useMemo(() => {
     const selected = options.find((option) => option.id === select.value)
     return selected?.label ?? placeholder
@@ -95,8 +96,8 @@ export const Select = ({
     [selectTheme]
   )
   const resolvedMenuStyle = useMemo(
-    () => selectTheme.menu({ hasSearch: showSearch }),
-    [selectTheme, showSearch]
+    () => selectTheme.menu({ hasSearch: isSearchVisible }),
+    [selectTheme, isSearchVisible]
   )
   const resolvedHeaderStyle = useMemo(
     () => selectTheme.header({}),
@@ -106,7 +107,7 @@ export const Select = ({
     () => selectTheme.emptyText({}),
     [selectTheme]
   )
-  const showEmptySearchResults = showSearch
+  const showEmptySearchResults = isSearchVisible
     && select.searchQuery.trim().length > 0
     && visibleOptions.length === 0
 
@@ -181,7 +182,7 @@ export const Select = ({
             style={resolvedMenuStyle}
             onPress={(event) => event.stopPropagation()}
           >
-            {showSearch && (
+            {isSearchVisible && (
               <View style={resolvedHeaderStyle}>
                 <SearchBar
                   value={select.searchQuery}
@@ -220,16 +221,14 @@ export const Select = ({
                       color={optionColor}
                       disabled={item.disabled}
                       onPress={() => select.selectValue(item.id)}
-                      trailing={isSelected
-                        ? (
-                          <ThemedIcon
-                            icon={HightideIconRegistry.Check}
-                            size={checkIcon.size}
-                            strokeWidth={checkIcon.strokeWidth}
-                            color={checkIcon.color as Color | undefined}
-                          />
-                        )
-                        : undefined}
+                      leading={(
+                        <ThemedIcon
+                          icon={HightideIconRegistry.Check}
+                          size={checkIcon.size}
+                          strokeWidth={checkIcon.strokeWidth}
+                          color={isSelected ? theme.colors.primary.color : 'transparent'}
+                        />
+                      )}
                     />
                   )
                 }}

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

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react'
+import type { TextInput } from 'react-native'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { Input, type InputProps } from './Input'
+
+export type TextareaProps = InputProps
+
+export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea({
+  style,
+  textStyle,
+  ...props
+}, ref) {
+  const { theme } = useTheme()
+
+  return (
+    <Input
+      {...props}
+      ref={ref}
+      multiline
+      textAlignVertical="top"
+      style={(state) => theme.components.textarea.container(state, style)}
+      textStyle={(state) => theme.components.textarea.text(state, textStyle)}
+    />
+  )
+})

package/src/components/user-interaction/index.ts

@@ -6,4 +6,5 @@ export * from './MultiSelect'
 export * from './SearchBar'
 export * from './Select'
 export * from './Switch'
+export * from './Textarea'
 export * from './ThemedPressable'

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

@@ -5,13 +5,13 @@ import {
   type ViewProps
 } from 'react-native'
 
-import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
 import type { Appearance } from '@helpwave/hightide-design/semantic-token-resolvers'
 import type { IconSize } from '@helpwave/hightide-design/theme-tokens'
 
 import type { IconComponent } from '../../icons/types'
 import { useContentTheme } from '../../global-contexts/content-theme/ContentThemeContext'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { HexColorUtils } from '../../utils/hex'
 
 export type ThemedIconAppearance = Appearance
 
@@ -33,7 +33,7 @@ export const ThemedIcon = ({
   ...props
 }: ThemedIconProps) => {
   const { theme } = useTheme()
-  const { foreground, iconStyle } = useContentTheme()
+  const { foreground, background, iconStyle } = useContentTheme()
   const resolvedSize = size ?? iconStyle.size ?? 'md'
   const iconToken = typeof resolvedSize === 'number'
     ? {
@@ -42,13 +42,16 @@ export const ThemedIcon = ({
     }
     : theme.components.icon[resolvedSize]
 
-  // TODO fix this by using a hex color parser
-  const baseColor = (color
-    ?? iconStyle.color
-    ?? foreground) as HexColorToken
+  const baseColor = HexColorUtils.tryParseColorValue(color ?? iconStyle.color ?? foreground) ?? foreground
   const resolvedColor = appearance === 'normal'
     ? baseColor
-    : theme.semantics.withAppearance({ color: baseColor, appearance })
+    : theme.semantics.withAppearance({
+      colorPair: {
+        color: background,
+        onColor: baseColor,
+      },
+      appearance,
+    })
 
   return (
     <View

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

@@ -6,8 +6,6 @@ import {
   type TextProps
 } from 'react-native'
 
-import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
-
 import { useContentTheme } from '../../global-contexts/content-theme/ContentThemeContext'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 
@@ -23,20 +21,21 @@ export const ThemedText = forwardRef<React.ComponentRef<typeof RNText>, ThemedTe
   ...props
 }, ref) {
   const { theme } = useTheme()
-  const { foreground, textStyle } = useContentTheme()
-  // TODO use a hex color parser
-  const foregroundColor = (typeof textStyle.color === 'string'
-    ? textStyle.color
-    : foreground) as HexColorToken
+  const { foreground, background, textStyle } = useContentTheme()
   const color = appearance === 'description'
-    ? theme.semantics.asDescription({ color: foregroundColor })
-    : foregroundColor
+    ? theme.semantics.asDescription({
+      colorPair: {
+        color: background,
+        onColor: foreground,
+      },
+    })
+    : undefined
 
   return (
     <RNText
       {...props}
       ref={ref}
-      style={[textStyle, { color }, style]}
+      style={[textStyle, color === undefined ? undefined : { color }, style]}
     />
   )
 })

package/src/global-contexts/content-theme/ContentThemeContext.ts

@@ -2,16 +2,18 @@ import {
   createContext,
   useContext
 } from 'react'
-import type { ColorValue, TextStyle } from 'react-native'
+import type { TextStyle } from 'react-native'
+
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
 
 import type { IconStyle } from '../../icons'
 
-export type ContentThemeContextValue = {
-  foreground: ColorValue,
-  background: ColorValue,
-  textStyle: TextStyle,
-  iconStyle: IconStyle,
-}
+export type ContentThemeContextValue = Readonly<{
+  foreground: HexColorToken,
+  background: HexColorToken,
+  textStyle: Readonly<TextStyle>,
+  iconStyle: Readonly<IconStyle>,
+}>
 
 export const ContentThemeContext = createContext<ContentThemeContextValue | null>(null)
 

package/src/global-contexts/content-theme/ContentThemeProvider.tsx

@@ -4,7 +4,10 @@ import {
 } from 'react'
 import type { ColorValue, TextStyle } from 'react-native'
 
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+
 import type { IconStyle } from '../../icons'
+import { HexColorUtils } from '../../utils/hex'
 import {
   ContentThemeContext,
   useContentTheme,
@@ -36,15 +39,15 @@ export const ContentThemeRootProvider = ({
 
 type ColorOverride =
   | ColorValue
-  | ((prev: ColorValue) => ColorValue)
+  | ((prev: HexColorToken) => ColorValue)
 
 type TextStyleOverride =
   | TextStyle
-  | ((prev: TextStyle, foreground: ColorValue) => TextStyle)
+  | ((prev: TextStyle, foreground: HexColorToken) => TextStyle)
 
 type IconStyleOverride =
   | IconStyle
-  | ((prev: IconStyle, foreground: ColorValue) => IconStyle)
+  | ((prev: IconStyle, foreground: HexColorToken) => IconStyle)
 
 export type ContentThemeOverrideProviderProps = PropsWithChildren & {
   foreground?: ColorOverride,
@@ -55,10 +58,22 @@ export type ContentThemeOverrideProviderProps = PropsWithChildren & {
   isKeepingIconColor?: boolean,
 }
 
+const resolveColorOverride = (
+  override: ColorOverride | undefined,
+  previous: HexColorToken
+): HexColorToken | undefined => {
+  if (override === undefined) {
+    return undefined
+  }
+
+  const raw = typeof override === 'function' ? override(previous) : override
+  return HexColorUtils.tryParseColorValue(raw)
+}
+
 export const ContentThemeOverrideProvider = ({
   children,
   foreground: foregroundOverride,
-  background: backroundOverride,
+  background: backgroundOverride,
   textStyle: textStyleOverride,
   iconStyle: iconStyleOverride,
   isKeepingIconColor = false,
@@ -67,25 +82,24 @@ export const ContentThemeOverrideProvider = ({
   const parent = useContentTheme()
 
   const value = useMemo((): ContentThemeContextValue => {
-    const newForeground = typeof foregroundOverride === 'function'
-      ? foregroundOverride(parent.foreground)
-      : foregroundOverride
+    const newForeground = resolveColorOverride(foregroundOverride, parent.foreground)
+    const newBackground = resolveColorOverride(backgroundOverride, parent.background)
 
-    const newBackground = typeof backroundOverride === 'function'
-      ? backroundOverride(parent.background)
-      : backroundOverride
-
-    const textStyle = typeof textStyleOverride === 'function'
+    let textStyle = typeof textStyleOverride === 'function'
       ? textStyleOverride(parent.textStyle, parent.foreground)
       : textStyleOverride ?? parent.textStyle
 
-    if(!isKeepingTextColor && newForeground !== undefined) textStyle['color'] = newForeground
+    if (!isKeepingTextColor && newForeground !== undefined) {
+      textStyle = { ...textStyle, color: newForeground }
+    }
 
-    const iconStyle = typeof iconStyleOverride === 'function'
+    let iconStyle = typeof iconStyleOverride === 'function'
       ? iconStyleOverride(parent.iconStyle, parent.foreground)
       : iconStyleOverride ?? parent.iconStyle
 
-    if(!isKeepingIconColor && newForeground !== undefined) iconStyle['color'] = newForeground
+    if (!isKeepingIconColor && newForeground !== undefined) {
+      iconStyle = { ...iconStyle, color: newForeground }
+    }
 
     return {
       foreground: newForeground ?? parent.foreground,
@@ -93,7 +107,7 @@ export const ContentThemeOverrideProvider = ({
       textStyle,
       iconStyle,
     }
-  }, [parent, foregroundOverride, textStyleOverride, iconStyleOverride, backroundOverride, isKeepingTextColor, isKeepingIconColor])
+  }, [parent, foregroundOverride, textStyleOverride, iconStyleOverride, backgroundOverride, isKeepingTextColor, isKeepingIconColor])
 
   return (
     <ContentThemeContext.Provider value={value}>

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

@@ -95,6 +95,7 @@ export const ThemeProvider = ({
     <ThemeContext.Provider value={contextValue}>
       <ContentThemeRootProvider
         foreground={contextValue.theme.colors.surface.onColor}
+        background={contextValue.theme.colors.surface.color}
         textStyle={contextValue.theme.typography.body.md}
         iconStyle={{
           size: contextValue.theme.icongraphy.sizes.md,

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

@@ -17,7 +17,7 @@ import {
 } from '../types/resolver'
 
 import { StyleAdapterUtils } from '../adapters'
-import { HexColorUtils } from '@helpwave/hightide-design/utils'
+import { HexColorUtils } from '../../utils/hex'
 
 const toDesignInputState = (state: InputState = {}): DesignInputState => {
   const active = new Set<InputStateValue>()

package/src/theme/resolvers/multiSelect.ts

@@ -135,7 +135,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)

package/src/theme/resolvers/searchBar.ts

@@ -18,7 +18,7 @@ import {
 } from '../types/resolver'
 
 import { StyleAdapterUtils } from '../adapters'
-import { HexColorUtils } from '@helpwave/hightide-design/utils'
+import { HexColorUtils } from '../../utils/hex'
 
 const toDesignSearchBarState = (state: SearchBarState = {}): DesignInputState => {
   const active = new Set<InputStateValue>()

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/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/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/textarea.ts

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

package/src/theme/types/semantics.ts

@@ -61,13 +61,13 @@ export type HightideThemeSemantics = {
     tintStrength?: TintStrength,
   }, HexColorToken>,
   withAppearance: BoundSemanticResolver<{
-    color: HexColorToken,
+    colorPair: ColorPairToken,
     appearance: Appearance,
   }, HexColorToken>,
   asFaded: BoundSemanticResolver<{
-    color: HexColorToken,
+    colorPair: ColorPairToken,
   }, HexColorToken>,
   asDescription: BoundSemanticResolver<{
-    color: HexColorToken,
+    colorPair: ColorPairToken,
   }, HexColorToken>,
 } & ElementLayoutTokens

package/src/utils/hex.ts

@@ -0,0 +1,193 @@
+import { processColor, type ColorValue } from 'react-native'
+
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+import { HexColorUtils as DesignHexColorUtils } from '@helpwave/hightide-design/utils'
+
+const clampByte = (value: number): number => Math.round(Math.min(255, Math.max(0, value)))
+
+const channelHex = (value: number): string => clampByte(value).toString(16).padStart(2, '0')
+
+const toHex = (r: number, g: number, b: number, alpha: number = 1): HexColorToken => {
+  if (alpha >= 1) {
+    return `#${channelHex(r)}${channelHex(g)}${channelHex(b)}`
+  }
+
+  return `#${channelHex(r)}${channelHex(g)}${channelHex(b)}${channelHex(alpha * 255)}`
+}
+
+const argbNumberToHex = (argb: number): HexColorToken => {
+  const unsigned = argb >>> 0
+  const alpha = ((unsigned >>> 24) & 0xff) / 255
+  const r = (unsigned >>> 16) & 0xff
+  const g = (unsigned >>> 8) & 0xff
+  const b = unsigned & 0xff
+
+  return toHex(r, g, b, alpha)
+}
+
+const parseHexString = (value: string): HexColorToken | undefined => {
+  const normalized = value.startsWith('#') ? value.slice(1) : value
+  if (!/^[0-9a-fA-F]+$/.test(normalized)) {
+    return undefined
+  }
+
+  if (normalized.length === 3 || normalized.length === 4) {
+    const expanded = normalized.split('').map((char) => `${char}${char}`).join('')
+    return parseHexString(expanded)
+  }
+
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    return undefined
+  }
+
+  const r = Number.parseInt(normalized.slice(0, 2), 16)
+  const g = Number.parseInt(normalized.slice(2, 4), 16)
+  const b = Number.parseInt(normalized.slice(4, 6), 16)
+  const alpha = normalized.length === 8
+    ? Number.parseInt(normalized.slice(6, 8), 16) / 255
+    : 1
+
+  return toHex(r, g, b, alpha)
+}
+
+const parseNumericChannel = (raw: string, percentScale: number): number => {
+  const trimmed = raw.trim()
+  if (trimmed.endsWith('%')) {
+    return (Number.parseFloat(trimmed.slice(0, -1)) / 100) * percentScale
+  }
+
+  return Number.parseFloat(trimmed)
+}
+
+const parseRgbString = (value: string): HexColorToken | undefined => {
+  const match = /^rgba?\(\s*([^\s,/]+)[\s,]+([^\s,/]+)[\s,]+([^\s,/]+)(?:\s*[,/]\s*([^\s,/]+))?\s*\)$/i.exec(value)
+  if (!match) {
+    return undefined
+  }
+
+  const r = parseNumericChannel(match[1], 255)
+  const g = parseNumericChannel(match[2], 255)
+  const b = parseNumericChannel(match[3], 255)
+  const alpha = match[4] === undefined ? 1 : parseNumericChannel(match[4], 1)
+
+  if ([r, g, b, alpha].some((channel) => Number.isNaN(channel))) {
+    return undefined
+  }
+
+  return toHex(r, g, b, alpha)
+}
+
+const hueToRgb = (p: number, q: number, t: number): number => {
+  let wrapped = t
+  if (wrapped < 0) {
+    wrapped += 1
+  }
+  if (wrapped > 1) {
+    wrapped -= 1
+  }
+  if (wrapped < 1 / 6) {
+    return p + (q - p) * 6 * wrapped
+  }
+  if (wrapped < 1 / 2) {
+    return q
+  }
+  if (wrapped < 2 / 3) {
+    return p + (q - p) * (2 / 3 - wrapped) * 6
+  }
+
+  return p
+}
+
+const hslToRgb = (hue: number, saturation: number, lightness: number): [number, number, number] => {
+  if (saturation === 0) {
+    const gray = lightness * 255
+    return [gray, gray, gray]
+  }
+
+  const q = lightness < 0.5
+    ? lightness * (1 + saturation)
+    : lightness + saturation - lightness * saturation
+  const p = 2 * lightness - q
+  const h = (((hue % 360) + 360) % 360) / 360
+
+  return [
+    hueToRgb(p, q, h + 1 / 3) * 255,
+    hueToRgb(p, q, h) * 255,
+    hueToRgb(p, q, h - 1 / 3) * 255,
+  ]
+}
+
+const parseHslString = (value: string): HexColorToken | undefined => {
+  const match = /^hsla?\(\s*([^\s,/]+)(?:deg)?[\s,]+([^\s,/]+)[\s,]+([^\s,/]+)(?:\s*[,/]\s*([^\s,/]+))?\s*\)$/i.exec(value)
+  if (!match) {
+    return undefined
+  }
+
+  const hue = Number.parseFloat(match[1])
+  const saturation = parseNumericChannel(match[2], 1)
+  const lightness = parseNumericChannel(match[3], 1)
+  const alpha = match[4] === undefined ? 1 : parseNumericChannel(match[4], 1)
+
+  if ([hue, saturation, lightness, alpha].some((channel) => Number.isNaN(channel))) {
+    return undefined
+  }
+
+  const [r, g, b] = hslToRgb(hue, saturation, lightness)
+  return toHex(r, g, b, alpha)
+}
+
+const parseColorLiteral = (color: ColorValue | number): HexColorToken | undefined => {
+  if (typeof color === 'number') {
+    return argbNumberToHex(color)
+  }
+
+  if (typeof color !== 'string') {
+    return undefined
+  }
+
+  const trimmed = color.trim()
+  if (trimmed.length === 0) {
+    return undefined
+  }
+
+  if (trimmed.toLowerCase() === 'transparent') {
+    return DesignHexColorUtils.resolveColorToken('transparent')
+  }
+
+  return parseHexString(trimmed)
+    ?? parseRgbString(trimmed)
+    ?? parseHslString(trimmed)
+}
+
+const tryParseColorValue = (color: ColorValue | number): HexColorToken | undefined => {
+  const fromLiteral = parseColorLiteral(color)
+  if (fromLiteral !== undefined) {
+    return fromLiteral
+  }
+
+  const processed = processColor(color)
+  if (typeof processed === 'number') {
+    return argbNumberToHex(processed)
+  }
+
+  if (typeof processed === 'string' && processed !== color) {
+    return parseColorLiteral(processed)
+  }
+
+  return undefined
+}
+
+const parseColorValue = (color: ColorValue | number): HexColorToken => {
+  const parsed = tryParseColorValue(color)
+  if (parsed === undefined) {
+    throw new Error(`Unable to parse ColorValue to hex: ${String(color)}`)
+  }
+
+  return parsed
+}
+
+export const HexColorUtils = {
+  ...DesignHexColorUtils,
+  tryParseColorValue,
+  parseColorValue,
+}

package/src/utils/index.ts

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