@helpwave/hightide-native 0.0.1 → 0.0.2

package/src/components/{Button → user-interaction}/Button.tsx

@@ -10,11 +10,15 @@ import {
   Text,
   type PressableProps,
   type StyleProp,
-  type TextStyle,
   type ViewStyle
 } from 'react-native'
 import { useTheme } from '../../global-contexts/theme'
-import type { ButtonState, ButtonStyle, ButtonTextStyle } from '../../theme'
+import type {
+  ButtonState,
+  ButtonStyle,
+  ButtonTextStyle,
+  StyleOverwrite
+} from '../../theme'
 
 export type ButtonSize = ElementSize
 
@@ -32,8 +36,8 @@ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   coloringStyle?: ButtonColoringStyle,
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
-  buttonStyle?: StyleProp<ViewStyle> | ((style: ButtonStyle) => StyleProp<ViewStyle>),
-  textStyle?: StyleProp<TextStyle> | ((style: ButtonTextStyle) => StyleProp<TextStyle>),
+  buttonStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
+  textStyle?: StyleOverwrite<ButtonState, ButtonTextStyle>,
 }
 
 type PressableInteraction = {
@@ -55,25 +59,15 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
 }, ref) {
   const { theme } = useTheme()
 
-  const resolveStyles = (interaction: PressableInteraction) => {
-    const state: ButtonState = {
-      size,
-      color,
-      coloringStyle,
-      isDisabled: !!disabled,
-      isPressed: interaction.pressed,
-      isHovered: !!interaction.hovered,
-      isFocused: !!interaction.focused,
-    }
-
-    const resolvedButton = theme.components.button.button(state)
-    const resolvedText = theme.components.button.text(state)
-
-    return {
-      button: typeof buttonStyle === 'function' ? buttonStyle(resolvedButton) : [resolvedButton, buttonStyle],
-      text: typeof textStyle === 'function' ? textStyle(resolvedText) : [resolvedText, textStyle],
-    }
-  }
+  const resolveState = (interaction: PressableInteraction): ButtonState => ({
+    size,
+    color,
+    coloringStyle,
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+  })
 
   return (
     <Pressable
@@ -81,17 +75,16 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
       ref={ref}
       disabled={disabled}
       style={(pressableState) => {
-        const interaction = pressableState as PressableInteraction
-        const resolved = resolveStyles(interaction)
-
-        return [resolved.button, style]
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.button.button(state, buttonStyle), style]
       }}
     >
       {(pressableState) => {
-        const resolved = resolveStyles(pressableState as PressableInteraction)
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedText = theme.components.button.text(state, textStyle)
 
         if (typeof children === 'string' || typeof children === 'number') {
-          return <Text style={resolved.text}>{children}</Text>
+          return <Text style={resolvedText}>{children}</Text>
         }
 
         return children

package/src/components/{Checkbox → user-interaction}/Checkbox.tsx

@@ -1,6 +1,6 @@
 import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 import { Check, Minus } from 'lucide-react-native'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import {
   Pressable,
   type PressableProps,
@@ -9,7 +9,7 @@ import {
 } from 'react-native'
 import { Icon } from '../../icons/Icon'
 import { useTheme } from '../../global-contexts/theme'
-import type { CheckboxSize, CheckboxState, CheckboxStyle } from '../../theme'
+import type { CheckboxSize, CheckboxState, CheckboxStyle, StyleOverwrite } from '../../theme'
 import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
 
 export type { CheckboxSize }
@@ -24,7 +24,7 @@ export type CheckboxProps = Omit<PressableProps, 'children' | 'style'>
     alwaysShowCheckIcon?: boolean,
     isRounded?: boolean,
     style?: StyleProp<ViewStyle>,
-    checkboxStyle?: StyleProp<ViewStyle> | ((style: CheckboxStyle) => StyleProp<ViewStyle>),
+    checkboxStyle?: StyleOverwrite<CheckboxState, CheckboxStyle>,
   }
 
 export const Checkbox = ({
@@ -60,7 +60,7 @@ export const Checkbox = ({
     defaultValue: initialValue,
   })
 
-  const state: CheckboxState = {
+  const state = useMemo((): CheckboxState => ({
     size,
     isChecked: value,
     isIndeterminate: indeterminate,
@@ -68,13 +68,16 @@ export const Checkbox = ({
     isDisabled: disabled,
     isRounded,
     alwaysShowCheckIcon,
-  }
+  }), [alwaysShowCheckIcon, disabled, indeterminate, invalid, isRounded, size, value])
 
-  const resolvedCheckbox = theme.components.checkbox.checkbox(state)
-  const resolvedIcon = theme.components.checkbox.icon(state)
-  const appliedCheckboxStyle = typeof checkboxStyle === 'function'
-    ? checkboxStyle(resolvedCheckbox)
-    : [resolvedCheckbox, checkboxStyle]
+  const resolvedCheckboxStyle = useMemo(
+    () => theme.components.checkbox.checkbox(state, checkboxStyle),
+    [theme, state, checkboxStyle]
+  )
+  const resolvedIcon = useMemo(
+    () => theme.components.checkbox.icon(state),
+    [theme, state]
+  )
 
   return (
     <Pressable
@@ -91,7 +94,7 @@ export const Checkbox = ({
         }
         props.onPress?.(event)
       }}
-      style={[appliedCheckboxStyle, style]}
+      style={[resolvedCheckboxStyle, style]}
     >
       {resolvedIcon.visible && (
         indeterminate

package/src/components/{IconButton → user-interaction}/IconButton.tsx

@@ -8,7 +8,7 @@ import { forwardRef, type ReactNode } from 'react'
 import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from 'react-native'
 import { Icon } from '../../icons/Icon'
 import { useTheme } from '../../global-contexts/theme'
-import type { IconButtonState, IconButtonStyle } from '../../theme'
+import type { IconButtonState, IconButtonStyle, StyleOverwrite } from '../../theme'
 
 export type IconButtonSize = ElementSize
 
@@ -21,7 +21,7 @@ export type IconButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   children?: ReactNode,
   accessibilityLabel: string,
   style?: StyleProp<ViewStyle>,
-  buttonStyle?: StyleProp<ViewStyle> | ((style: IconButtonStyle) => StyleProp<ViewStyle>),
+  buttonStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
 }
 
 type PressableInteraction = {
@@ -45,25 +45,15 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
 }, ref) {
   const { theme } = useTheme()
 
-  const resolveStyles = (interaction: PressableInteraction) => {
-    const state: IconButtonState = {
-      size,
-      color,
-      coloringStyle,
-      isDisabled: !!disabled,
-      isPressed: interaction.pressed,
-      isHovered: !!interaction.hovered,
-      isFocused: !!interaction.focused,
-    }
-
-    const resolvedButton = theme.components.iconButton.button(state)
-    const resolvedIcon = theme.components.iconButton.icon(state)
-
-    return {
-      button: typeof buttonStyle === 'function' ? buttonStyle(resolvedButton) : [resolvedButton, buttonStyle],
-      icon: resolvedIcon,
-    }
-  }
+  const resolveState = (interaction: PressableInteraction): IconButtonState => ({
+    size,
+    color,
+    coloringStyle,
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+  })
 
   return (
     <Pressable
@@ -73,14 +63,16 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       style={(pressableState) => {
-        const resolved = resolveStyles(pressableState as PressableInteraction)
-        return [resolved.button, style]
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.iconButton.button(state, buttonStyle), style]
       }}
     >
       {(pressableState) => {
-        const resolved = resolveStyles(pressableState as PressableInteraction)
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedIcon = theme.components.iconButton.icon(state)
+
         if (icon) {
-          return <Icon icon={icon} size={iconSize ?? size} color={resolved.icon.color} />
+          return <Icon icon={icon} size={iconSize ?? size} color={resolvedIcon.color} />
         }
         return children
       }}

package/src/components/{Input → user-interaction}/Input.tsx

@@ -3,10 +3,10 @@ import {
   useDelay,
   type UseDelayOptionsResolved
 } from '@helpwave/hightide-utils/hooks'
-import { forwardRef } from 'react'
+import { forwardRef, useMemo } from 'react'
 import { TextInput, type StyleProp, type TextInputProps, type TextStyle } from 'react-native'
 import { useTheme } from '../../global-contexts/theme'
-import type { InputState, InputStyle } from '../../theme'
+import type { InputState, InputStyle, StyleOverwrite } from '../../theme'
 import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
 
 export type EditCompleteOptionsResolved = {
@@ -31,7 +31,7 @@ export type InputProps = Omit<TextInputProps, 'value' | 'style'>
     editCompleteOptions?: EditCompleteOptions,
     initialValue?: string,
     style?: StyleProp<TextStyle>,
-    inputStyle?: StyleProp<TextStyle> | ((style: InputStyle) => StyleProp<TextStyle>),
+    inputStyle?: StyleOverwrite<InputState, InputStyle>,
   }
 
 export const Input = forwardRef<TextInput, InputProps>(function Input({
@@ -68,16 +68,20 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
     disabled: !afterDelay || disabled || readOnly,
   })
 
-  const state: InputState = {
+  const state = useMemo((): InputState => ({
     isDisabled: disabled,
     isInvalid: invalid,
     isReadOnly: readOnly,
-  }
+  }), [disabled, invalid, readOnly])
 
-  const resolvedInput = theme.components.input.input(state)
-  const appliedInputStyle = typeof inputStyle === 'function'
-    ? inputStyle(resolvedInput)
-    : [resolvedInput, inputStyle]
+  const resolvedInputStyle = useMemo(
+    () => theme.components.input.input(state, inputStyle),
+    [theme, state, inputStyle]
+  )
+  const placeholderColor = useMemo(
+    () => theme.components.input.placeholderColor(state),
+    [theme, state]
+  )
 
   return (
     <TextInput
@@ -106,8 +110,8 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
           clearTimer()
         }
       }}
-      placeholderTextColor={theme.components.input.placeholderColor(state)}
-      style={[appliedInputStyle, style]}
+      placeholderTextColor={placeholderColor}
+      style={[resolvedInputStyle, style]}
       accessibilityState={{ disabled, selected: required }}
     />
   )

package/src/components/{MultiSelect → user-interaction}/MultiSelect.tsx

@@ -10,12 +10,12 @@ import {
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { Chip } from '../Chip/Chip'
 import { Icon } from '../../icons/Icon'
 import { useMultiSelect, type UseMultiSelectOption } from '../../hooks/useMultiSelect'
 import { useTheme } from '../../global-contexts/theme'
 import type { MultiSelectState } from '../../theme'
 import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
+import { Chip } from '../visualization-and-display'
 
 export type MultiSelectOption = UseMultiSelectOption
 
@@ -60,23 +60,48 @@ export const MultiSelect = ({
       .map((option) => option.label ?? option.id)
   }, [multiSelect, options])
 
-  const state: MultiSelectState = {
+  const state = useMemo((): MultiSelectState => ({
     isDisabled: disabled,
     isReadOnly: readOnly,
     isInvalid: invalid,
     isOpen: multiSelect.isOpen,
     hasSelections: selectedLabels.length > 0,
     hasValue: selectedLabels.length > 0,
-  }
+  }), [disabled, invalid, multiSelect.isOpen, readOnly, selectedLabels.length])
 
   const multiSelectTheme = theme.components.multiSelect
 
+  const resolvedTriggerStyle = useMemo(
+    () => multiSelectTheme.trigger(state),
+    [multiSelectTheme, state]
+  )
+  const resolvedTriggerTextStyle = useMemo(
+    () => multiSelectTheme.triggerText(state),
+    [multiSelectTheme, state]
+  )
+  const resolvedOverlayStyle = useMemo(
+    () => multiSelectTheme.overlay(state),
+    [multiSelectTheme, state]
+  )
+  const resolvedMenuStyle = useMemo(
+    () => multiSelectTheme.menu(state),
+    [multiSelectTheme, state]
+  )
+  const resolvedSearchStyle = useMemo(
+    () => multiSelectTheme.search(state),
+    [multiSelectTheme, state]
+  )
+  const searchPlaceholderColor = useMemo(
+    () => multiSelectTheme.searchPlaceholderColor(state),
+    [multiSelectTheme, state]
+  )
+
   return (
     <View style={style}>
       <Pressable
         disabled={!interactive}
         onPress={() => multiSelect.toggleOpen()}
-        style={multiSelectTheme.trigger(state)}
+        style={resolvedTriggerStyle}
       >
         {selectedLabels.length > 0
           ? (
@@ -88,7 +113,7 @@ export const MultiSelect = ({
               ))}
             </View>
           )
-          : <Text style={multiSelectTheme.triggerText(state)}>{placeholder}</Text>}
+          : <Text style={resolvedTriggerTextStyle}>{placeholder}</Text>}
       </Pressable>
 
       <Modal
@@ -98,11 +123,11 @@ export const MultiSelect = ({
         onRequestClose={() => multiSelect.setIsOpen(false)}
       >
         <Pressable
-          style={multiSelectTheme.overlay(state)}
+          style={resolvedOverlayStyle}
           onPress={() => multiSelect.setIsOpen(false)}
         >
           <Pressable
-            style={multiSelectTheme.menu(state)}
+            style={resolvedMenuStyle}
             onPress={(event) => event.stopPropagation()}
           >
             {showSearch && (
@@ -110,8 +135,8 @@ export const MultiSelect = ({
                 value={multiSelect.searchQuery}
                 onChangeText={multiSelect.setSearchQuery}
                 placeholder="Search…"
-                placeholderTextColor={multiSelectTheme.searchPlaceholderColor(state)}
-                style={multiSelectTheme.search(state)}
+                placeholderTextColor={searchPlaceholderColor}
+                style={resolvedSearchStyle}
               />
             )}
             <FlatList

package/src/components/{Select → user-interaction}/Select.tsx

@@ -58,24 +58,49 @@ export const Select = ({
     return selected?.label ?? placeholder
   }, [options, placeholder, select.value])
 
-  const state: SelectState = {
+  const state = useMemo((): SelectState => ({
     isDisabled: disabled,
     isReadOnly: readOnly,
     isInvalid: invalid,
     isOpen: select.isOpen,
     hasValue: !!select.value,
-  }
+  }), [disabled, invalid, readOnly, select.isOpen, select.value])
 
   const selectTheme = theme.components.select
 
+  const resolvedTriggerStyle = useMemo(
+    () => selectTheme.trigger(state),
+    [selectTheme, state]
+  )
+  const resolvedTriggerTextStyle = useMemo(
+    () => selectTheme.triggerText(state),
+    [selectTheme, state]
+  )
+  const resolvedOverlayStyle = useMemo(
+    () => selectTheme.overlay(state),
+    [selectTheme, state]
+  )
+  const resolvedMenuStyle = useMemo(
+    () => selectTheme.menu(state),
+    [selectTheme, state]
+  )
+  const resolvedSearchStyle = useMemo(
+    () => selectTheme.search(state),
+    [selectTheme, state]
+  )
+  const searchPlaceholderColor = useMemo(
+    () => selectTheme.searchPlaceholderColor(state),
+    [selectTheme, state]
+  )
+
   return (
     <View style={style}>
       <Pressable
         disabled={!interactive}
         onPress={() => select.toggleOpen()}
-        style={selectTheme.trigger(state)}
+        style={resolvedTriggerStyle}
       >
-        <Text style={selectTheme.triggerText(state)}>
+        <Text style={resolvedTriggerTextStyle}>
           {selectedLabel}
         </Text>
       </Pressable>
@@ -87,11 +112,11 @@ export const Select = ({
         onRequestClose={() => select.setIsOpen(false)}
       >
         <Pressable
-          style={selectTheme.overlay(state)}
+          style={resolvedOverlayStyle}
           onPress={() => select.setIsOpen(false)}
         >
           <Pressable
-            style={selectTheme.menu(state)}
+            style={resolvedMenuStyle}
             onPress={(event) => event.stopPropagation()}
           >
             {showSearch && (
@@ -99,8 +124,8 @@ export const Select = ({
                 value={select.searchQuery}
                 onChangeText={select.setSearchQuery}
                 placeholder="Search…"
-                placeholderTextColor={selectTheme.searchPlaceholderColor(state)}
-                style={selectTheme.search(state)}
+                placeholderTextColor={searchPlaceholderColor}
+                style={resolvedSearchStyle}
               />
             )}
             <FlatList

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

@@ -0,0 +1,6 @@
+export * from './Button'
+export * from './Checkbox'
+export * from './IconButton'
+export * from './Input'
+export * from './MultiSelect'
+export * from './Select'

package/src/components/{Chip → visualization-and-display}/Chip.tsx

@@ -4,17 +4,16 @@ import {
   type ColoringType,
   type ElementSize
 } from '@helpwave/hightide-design'
-import type { ReactNode } from 'react'
+import { useMemo, type ReactNode } from 'react'
 import {
   Text,
   View,
   type StyleProp,
-  type TextStyle,
   type ViewProps,
   type ViewStyle
 } from 'react-native'
 import { useTheme } from '../../global-contexts/theme'
-import type { ChipState, ChipStyle, ChipTextStyle } from '../../theme'
+import type { ChipState, ChipStyle, ChipTextStyle, StyleOverwrite } from '../../theme'
 
 export type ChipSize = ElementSize
 
@@ -32,8 +31,8 @@ export type ChipProps = Omit<ViewProps, 'children' | 'style'> & {
   size?: ChipSize,
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
-  chipStyle?: StyleProp<ViewStyle> | ((style: ChipStyle) => StyleProp<ViewStyle>),
-  textStyle?: StyleProp<TextStyle> | ((style: ChipTextStyle) => StyleProp<TextStyle>),
+  chipStyle?: StyleOverwrite<ChipState, ChipStyle>,
+  textStyle?: StyleOverwrite<ChipState, ChipTextStyle>,
 }
 
 export const Chip = ({
@@ -47,24 +46,29 @@ export const Chip = ({
   ...props
 }: ChipProps) => {
   const { theme } = useTheme()
-  const state: ChipState = {
+
+  const state = useMemo((): ChipState => ({
     size,
     color,
     coloringStyle,
-  }
+  }), [size, color, coloringStyle])
 
-  const resolvedChip = theme.components.chip.chip(state)
-  const resolvedText = theme.components.chip.text(state)
-  const appliedChipStyle = typeof chipStyle === 'function' ? chipStyle(resolvedChip) : [resolvedChip, chipStyle]
-  const appliedTextStyle = typeof textStyle === 'function' ? textStyle(resolvedText) : [resolvedText, textStyle]
+  const resolvedChipStyle = useMemo(
+    () => theme.components.chip.chip(state, chipStyle),
+    [theme, state, chipStyle]
+  )
+  const resolvedTextStyle = useMemo(
+    () => theme.components.chip.text(state, textStyle),
+    [theme, state, textStyle]
+  )
 
   return (
     <View
       {...props}
-      style={[appliedChipStyle, style]}
+      style={[resolvedChipStyle, style]}
     >
       {typeof children === 'string' || typeof children === 'number'
-        ? <Text style={appliedTextStyle}>{children}</Text>
+        ? <Text style={resolvedTextStyle}>{children}</Text>
         : children}
     </View>
   )

package/src/theme/resolvers/button.ts

@@ -6,7 +6,9 @@ import {
   type ElementSize,
   type SemanticColors
 } from '@helpwave/hightide-design'
-import type { ButtonState, ButtonStyle, ButtonTextStyle, ButtonTheme } from '../types'
+import type { ViewStyle, TextStyle } from 'react-native'
+import type { ButtonState, ButtonTheme } from '../types'
+import { createStyleResolver } from '../types/resolver'
 import { isOutlineColoringStyle, resolveColoringStyles } from './coloring'
 
 const buttonFontSizes: Record<ElementSize, number> = {
@@ -35,7 +37,7 @@ export const createButtonTheme = ({
     const sizing = componentLayouts.element[size]
     const outlinePadding = isOutlineColoringStyle(coloringStyle)
 
-    const button: ButtonStyle = {
+    const button: ViewStyle = {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
@@ -51,7 +53,7 @@ export const createButtonTheme = ({
       opacity: state.isDisabled ? 0.6 : 1,
     }
 
-    const text: ButtonTextStyle = {
+    const text: TextStyle = {
       color: resolved.color,
       fontSize: buttonFontSizes[size],
       fontWeight: '600',
@@ -61,8 +63,8 @@ export const createButtonTheme = ({
   }
 
   return {
-    button: (state) => resolveState(state).button,
-    text: (state) => resolveState(state).text,
+    button: createStyleResolver((state) => resolveState(state).button),
+    text: createStyleResolver((state) => resolveState(state).text),
   }
 }