@helpwave/hightide-native 0.0.1 → 0.0.5

package/src/components/menu/MenuNavigationItem.tsx

@@ -0,0 +1,90 @@
+import {
+  Fragment,
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { ChevronRight } from 'lucide-react-native'
+
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  MenuActionItemLabelStyle,
+  MenuActionItemState,
+  MenuActionItemStyle
+} from '@/src/theme/types/components/menu'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+
+export type MenuNavigationItemProps = Omit<PressableProps, 'children' | 'style'> & {
+  label: string,
+  leading?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  itemStyle?: StyleOverwrite<MenuActionItemState, MenuActionItemStyle>,
+  labelStyle?: StyleOverwrite<MenuActionItemState, MenuActionItemLabelStyle>,
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+}
+
+export const MenuNavigationItem = ({
+  label,
+  leading,
+  disabled,
+  style,
+  itemStyle,
+  labelStyle,
+  ...props
+}: MenuNavigationItemProps) => {
+  const { theme } = useTheme()
+
+  const resolveState = (interaction: PressableInteraction): MenuActionItemState => ({
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+  })
+
+  const resolvedContentStyle = useMemo(
+    () => theme.components.menu.navigationItemContent({}),
+    [theme]
+  )
+  const trailingColor = useMemo(
+    () => theme.components.menu.navigationItemTrailing({}).color,
+    [theme]
+  )
+
+  return (
+    <Pressable
+      {...props}
+      disabled={disabled}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.menu.navigationItem(state, itemStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedLabelStyle = theme.components.menu.navigationItemLabel(state, labelStyle)
+
+        return (
+          <Fragment>
+            {leading}
+            <View style={resolvedContentStyle}>
+              <Text style={resolvedLabelStyle}>{label}</Text>
+            </View>
+            <ChevronRight size={16} color={trailingColor} />
+          </Fragment>
+        )
+      }}
+    </Pressable>
+  )
+}

package/src/components/menu/index.ts

@@ -0,0 +1,4 @@
+export * from './Menu'
+export * from './MenuActionItem'
+export * from './MenuItem'
+export * from './MenuNavigationItem'

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

@@ -0,0 +1,101 @@
+import {
+  forwardRef,
+  type ReactNode
+} from 'react'
+import {
+  Pressable,
+  Text,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+
+import {
+  coloringTypes,
+  type ColoringType
+} from '@helpwave/hightide-design/helpers'
+import type {
+  ButtonColoringStyle,
+  ElementSize
+} from '@helpwave/hightide-design/types'
+
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  ButtonState,
+  ButtonStyle,
+  ButtonTextStyle
+} from '@/src/theme/types/components/button'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+
+export type ButtonSize = ElementSize
+
+export type ButtonColor = ColoringType
+
+export const ButtonUtil = {
+  colors: coloringTypes,
+  sizes: ['xs', 'sm', 'md', 'lg'] as const satisfies readonly ElementSize[],
+  coloringStyles: ['outline', 'solid', 'text', 'tonal', 'tonal-outline'] as const satisfies readonly ButtonColoringStyle[],
+}
+
+export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
+  size?: ButtonSize,
+  color?: ButtonColor,
+  coloringStyle?: ButtonColoringStyle,
+  children?: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  buttonStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
+  textStyle?: StyleOverwrite<ButtonState, ButtonTextStyle>,
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+}
+
+export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonProps>(function Button({
+  children,
+  size = 'md',
+  color = 'primary',
+  coloringStyle = 'solid',
+  disabled,
+  style,
+  buttonStyle,
+  textStyle,
+  ...props
+}, ref) {
+  const { theme } = useTheme()
+
+  const resolveState = (interaction: PressableInteraction): ButtonState => ({
+    size,
+    color,
+    coloringStyle,
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+  })
+
+  return (
+    <Pressable
+      {...props}
+      ref={ref}
+      disabled={disabled}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.button.button(state, buttonStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedText = theme.components.button.text(state, textStyle)
+
+        if (typeof children === 'string' || typeof children === 'number') {
+          return <Text style={resolvedText}>{children}</Text>
+        }
+
+        return children
+      }}
+    </Pressable>
+  )
+})

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

@@ -1,16 +1,35 @@
-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,
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { Icon } from '../../icons/Icon'
-import { useTheme } from '../../global-contexts/theme'
-import type { CheckboxSize, CheckboxState, CheckboxStyle } from '../../theme'
-import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
+import {
+  Check,
+  Minus
+} from 'lucide-react-native'
+
+import {
+  useControlledState,
+  useEventCallbackStabilizer
+} from '@helpwave/hightide-utils/hooks'
+
+import { Icon } from '@/src/components/visualization-and-display/Icon'
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  CheckboxSize,
+  CheckboxState,
+  CheckboxStyle
+} from '@/src/theme/types/components/checkbox'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '@/src/types/formField'
 
 export type { CheckboxSize }
 
@@ -24,7 +43,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 +79,7 @@ export const Checkbox = ({
     defaultValue: initialValue,
   })
 
-  const state: CheckboxState = {
+  const state = useMemo((): CheckboxState => ({
     size,
     isChecked: value,
     isIndeterminate: indeterminate,
@@ -68,13 +87,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 +113,7 @@ export const Checkbox = ({
         }
         props.onPress?.(event)
       }}
-      style={[appliedCheckboxStyle, style]}
+      style={[resolvedCheckboxStyle, style]}
     >
       {resolvedIcon.visible && (
         indeterminate

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

@@ -0,0 +1,95 @@
+import {
+  forwardRef,
+  type ReactNode
+} from 'react'
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import type { LucideIcon } from 'lucide-react-native'
+
+import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type {
+  ButtonColoringStyle,
+  ElementSize
+} from '@helpwave/hightide-design/types'
+
+import { Icon } from '@/src/components/visualization-and-display/Icon'
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  IconButtonState,
+  IconButtonStyle
+} from '@/src/theme/types/components/iconButton'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+
+export type IconButtonSize = ElementSize
+
+export type IconButtonProps = Omit<PressableProps, 'children' | 'style'> & {
+  size?: IconButtonSize,
+  color?: ColoringType,
+  coloringStyle?: ButtonColoringStyle,
+  icon?: LucideIcon,
+  iconSize?: ElementSize,
+  children?: ReactNode,
+  accessibilityLabel: string,
+  style?: StyleProp<ViewStyle>,
+  buttonStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+}
+
+export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconButtonProps>(function IconButton({
+  children,
+  icon,
+  iconSize,
+  size = 'md',
+  color = 'neutral',
+  coloringStyle = 'solid',
+  disabled,
+  accessibilityLabel,
+  style,
+  buttonStyle,
+  ...props
+}, ref) {
+  const { theme } = useTheme()
+
+  const resolveState = (interaction: PressableInteraction): IconButtonState => ({
+    size,
+    color,
+    coloringStyle,
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+  })
+
+  return (
+    <Pressable
+      {...props}
+      ref={ref}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.iconButton.button(state, buttonStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedIcon = theme.components.iconButton.icon(state)
+
+        if (icon) {
+          return <Icon icon={icon} size={iconSize ?? size} color={resolvedIcon.color} />
+        }
+        return children
+      }}
+    </Pressable>
+  )
+})

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

@@ -1,13 +1,30 @@
+import {
+  forwardRef,
+  useMemo
+} from 'react'
+import {
+  TextInput,
+  type StyleProp,
+  type TextInputProps,
+  type TextStyle
+} from 'react-native'
+
 import {
   useControlledState,
   useDelay,
   type UseDelayOptionsResolved
 } from '@helpwave/hightide-utils/hooks'
-import { forwardRef } 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 { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
+
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  InputState,
+  InputStyle
+} from '@/src/theme/types/components/input'
+import type { StyleOverwrite } from '@/src/theme/types/resolver'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '@/src/types/formField'
 
 export type EditCompleteOptionsResolved = {
   onBlur: boolean,
@@ -31,7 +48,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 +85,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 +127,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

@@ -1,4 +1,3 @@
-import { Check } from 'lucide-react-native'
 import { useMemo } from 'react'
 import {
   FlatList,
@@ -10,12 +9,20 @@ 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 { Check } from 'lucide-react-native'
+
+import { Chip } from '@/src/components/visualization-and-display/Chip'
+import { Icon } from '@/src/components/visualization-and-display/Icon'
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import {
+  useMultiSelect,
+  type UseMultiSelectOption
+} from '@/src/hooks/useMultiSelect'
+import type { MultiSelectState } from '@/src/theme/types/components/multiSelect'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '@/src/types/formField'
 
 export type MultiSelectOption = UseMultiSelectOption
 
@@ -60,23 +67,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 +120,7 @@ export const MultiSelect = ({
               ))}
             </View>
           )
-          : <Text style={multiSelectTheme.triggerText(state)}>{placeholder}</Text>}
+          : <Text style={resolvedTriggerTextStyle}>{placeholder}</Text>}
       </Pressable>
 
       <Modal
@@ -98,11 +130,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 +142,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

@@ -9,10 +9,17 @@ import {
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { useSelect, type UseSelectOption } from '../../hooks/useSelect'
-import { useTheme } from '../../global-contexts/theme'
-import type { SelectState } from '../../theme'
-import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
+
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import {
+  useSelect,
+  type UseSelectOption
+} from '@/src/hooks/useSelect'
+import type { SelectState } from '@/src/theme/types/components/select'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '@/src/types/formField'
 
 export type SelectOption<T extends string = string> = UseSelectOption & {
   value?: T,
@@ -58,24 +65,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 +119,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 +131,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'