@helpwave/hightide-native 0.0.7 → 0.1.0

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

@@ -1,72 +1,88 @@
-import {
-  forwardRef,
-  type ReactNode
-} from 'react'
+import { Fragment, forwardRef } from 'react'
 import {
   Pressable,
+  View,
   type PressableProps,
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import type { LucideIcon } from 'lucide-react-native'
-
-import type { ColoringType } from '@helpwave/hightide-design/utils'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type {
-  ButtonColoringStyle,
-  ElementSize
-} from '@helpwave/hightide-design/types'
+  ComponentSize,
+  IconButtonVariant
+} from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import { Icon } from '../visualization-and-display/Icon'
+import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   IconButtonState,
   IconButtonStyle
 } from '../../theme/types/components/iconButton'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import type { IconComponent } from '../../icons'
+import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
+import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
+import { ThemedIcon } from '../visualization-and-display'
+
+export type IconButtonSize = ComponentSize
 
-export type IconButtonSize = ElementSize
+export type { IconButtonVariant }
+
+export const IconButtonUtil = {
+  sizes: ['xs', 'sm', 'md', 'lg', 'xl'] as const satisfies readonly ComponentSize[],
+  variants: ['elevated', 'filled', 'tonal', 'foreground'] as const satisfies readonly IconButtonVariant[],
+}
 
 export type IconButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   size?: IconButtonSize,
-  color?: ColoringType,
-  coloringStyle?: ButtonColoringStyle,
-  icon?: LucideIcon,
-  iconSize?: ElementSize,
-  children?: ReactNode,
+  color?: ColorPairToken,
+  variant?: IconButtonVariant,
+  icon: IconComponent,
   accessibilityLabel: string,
   style?: StyleProp<ViewStyle>,
-  buttonStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
+  containerStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
+  stateLayerStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
 }
 
 type PressableInteraction = {
   pressed: boolean,
   hovered?: boolean,
   focused?: boolean,
+  focusVisible?: boolean,
 }
 
 export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconButtonProps>(function IconButton({
-  children,
-  icon,
-  iconSize,
+  icon: IconComponent,
   size = 'md',
-  color = 'neutral',
-  coloringStyle = 'solid',
+  color,
+  variant = 'filled',
   disabled,
   accessibilityLabel,
   style,
-  buttonStyle,
+  containerStyle,
+  stateLayerStyle,
+  hitSlop: providedHitSlop,
+  onLayout: providedOnLayout,
   ...props
 }, ref) {
   const { theme } = useTheme()
+  const { hitBox } = useDebugContext()
+  const { hitSlop, onLayout } = useMinimumTouchTargetHitSlop({
+    touchTargetSize: theme.semantics.touchTargetSize({}),
+    hitSlop: providedHitSlop,
+    onLayout: providedOnLayout,
+  })
 
   const resolveState = (interaction: PressableInteraction): IconButtonState => ({
     size,
     color,
-    coloringStyle,
+    variant,
     isDisabled: !!disabled,
     isPressed: interaction.pressed,
     isHovered: !!interaction.hovered,
     isFocused: !!interaction.focused,
+    isFocusVisible: !!interaction.focusVisible,
   })
 
   return (
@@ -76,19 +92,41 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
       disabled={disabled}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
+      hitSlop={hitSlop}
+      onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        return [theme.components.iconButton.button(state, buttonStyle), style]
+        return [
+          theme.components.iconButton.container(state, containerStyle),
+          style,
+        ]
       }}
     >
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         const resolvedIcon = theme.components.iconButton.icon(state)
+        const resolvedText = theme.components.iconButton.text(state)
 
-        if (icon) {
-          return <Icon icon={icon} size={iconSize ?? size} color={resolvedIcon.color} />
-        }
-        return children
+        return (
+          <Fragment>
+            {hitBox.isVisualizing && (
+              <View
+                pointerEvents="none"
+                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+              />
+            )}
+            <View
+              pointerEvents="none"
+              style={theme.components.iconButton.stateLayer(state, stateLayerStyle)}
+            />
+            <ContentThemeProvider
+              foregroundColor={resolvedIcon.color ?? theme.colors.primary.color}
+              textStyle={resolvedText}
+            >
+              <ThemedIcon icon={IconComponent} size={resolvedIcon.size} strokeWidth={resolvedIcon.strokeWidth}/>
+            </ContentThemeProvider>
+          </Fragment>
+        )
       }}
     </Pressable>
   )

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

@@ -1,6 +1,7 @@
 import {
   forwardRef,
-  useMemo
+  useMemo,
+  useState
 } from 'react'
 import {
   TextInput,
@@ -15,10 +16,12 @@ import {
   type UseDelayOptionsResolved
 } from '@helpwave/hightide-utils/hooks'
 
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
+  InputContainerStyle,
   InputState,
-  InputStyle
+  InputTextStyle
 } from '../../theme/types/components/input'
 import type { StyleOverwrite } from '../../theme/types/resolver'
 import type {
@@ -45,15 +48,18 @@ export type InputProps = Omit<TextInputProps, 'value' | 'style'>
   & Partial<FormFieldDataHandling<string>>
   & Partial<FormFieldInteractionStates>
   & {
+    color?: ColorPairToken,
     editCompleteOptions?: EditCompleteOptions,
     initialValue?: string,
     style?: StyleProp<TextStyle>,
-    inputStyle?: StyleOverwrite<InputState, InputStyle>,
+    containerStyle?: StyleOverwrite<InputState, InputContainerStyle>,
+    textStyle?: StyleOverwrite<InputState, InputTextStyle>,
   }
 
 export const Input = forwardRef<TextInput, InputProps>(function Input({
   value: controlledValue,
   initialValue,
+  color,
   invalid = false,
   disabled = false,
   readOnly = false,
@@ -62,10 +68,14 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
   onEditComplete,
   editCompleteOptions,
   style,
-  inputStyle,
+  containerStyle,
+  textStyle,
   ...props
 }, ref) {
   const { theme } = useTheme()
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPressed, setIsPressed] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
 
   const [value, setValue] = useControlledState({
     value: controlledValue,
@@ -85,18 +95,28 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
     disabled: !afterDelay || disabled || readOnly,
   })
 
+  const interactive = !disabled && !readOnly
+
   const state = useMemo((): InputState => ({
+    color,
     isDisabled: disabled,
     isInvalid: invalid,
-    isReadOnly: readOnly,
-  }), [disabled, invalid, readOnly])
+    isReadonly: readOnly,
+    isHovered: interactive && isHovered,
+    isPressed: interactive && isPressed,
+    isFocused: interactive && isFocused,
+  }), [color, disabled, invalid, readOnly, interactive, isHovered, isPressed, isFocused])
 
-  const resolvedInputStyle = useMemo(
-    () => theme.components.input.input(state, inputStyle),
-    [theme, state, inputStyle]
+  const resolvedContainerStyle = useMemo(
+    () => theme.components.input.container(state, containerStyle),
+    [theme, state, containerStyle]
+  )
+  const resolvedTextStyle = useMemo(
+    () => theme.components.input.text(state, textStyle),
+    [theme, state, textStyle]
   )
-  const placeholderColor = useMemo(
-    () => theme.components.input.placeholderColor(state),
+  const resolvedPlaceholderStyle = useMemo(
+    () => theme.components.input.placeholder(state),
     [theme, state]
   )
 
@@ -105,7 +125,7 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
       {...props}
       ref={ref}
       value={value}
-      editable={!disabled && !readOnly}
+      editable={interactive}
       onChangeText={(nextValue) => {
         props.onChangeText?.(nextValue)
         restartTimer(() => {
@@ -113,13 +133,40 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
         })
         setValue(nextValue)
       }}
+      onFocus={(event) => {
+        if (interactive) {
+          setIsFocused(true)
+        }
+        props.onFocus?.(event)
+      }}
       onBlur={(event) => {
+        setIsFocused(false)
         props.onBlur?.(event)
         if (allowEditCompleteOnBlur) {
           onEditComplete?.(value ?? '')
           clearTimer()
         }
       }}
+      onPressIn={(event) => {
+        if (interactive) {
+          setIsPressed(true)
+        }
+        props.onPressIn?.(event)
+      }}
+      onPressOut={(event) => {
+        setIsPressed(false)
+        props.onPressOut?.(event)
+      }}
+      onPointerEnter={(event) => {
+        if (interactive) {
+          setIsHovered(true)
+        }
+        props.onPointerEnter?.(event)
+      }}
+      onPointerLeave={(event) => {
+        setIsHovered(false)
+        props.onPointerLeave?.(event)
+      }}
       onSubmitEditing={(event) => {
         props.onSubmitEditing?.(event)
         if (allowEnterComplete) {
@@ -127,8 +174,8 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
           clearTimer()
         }
       }}
-      placeholderTextColor={placeholderColor}
-      style={[resolvedInputStyle, style]}
+      placeholderTextColor={resolvedPlaceholderStyle.color}
+      style={[resolvedContainerStyle, resolvedTextStyle, style]}
       accessibilityState={{ disabled, selected: required }}
     />
   )

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

@@ -3,16 +3,18 @@ import {
   FlatList,
   Modal,
   Pressable,
-  Text,
-  TextInput,
   View,
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { Check } from 'lucide-react-native'
-
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import { Chip } from '../visualization-and-display/Chip'
-import { Icon } from '../visualization-and-display/Icon'
+import { ThemedText } from '../visualization-and-display/ThemedText'
+import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
+import { ListActionItem } from '../list/ListActionItem'
+import { IconButton } from './IconButton'
+import { SearchBar } from './SearchBar'
+import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import {
   useMultiSelect,
@@ -23,6 +25,7 @@ import type {
   FormFieldDataHandling,
   FormFieldInteractionStates
 } from '../../types/formField'
+import { useTranslation } from '@helpwave/hightide-utils/context'
 
 export type MultiSelectOption = UseMultiSelectOption
 
@@ -34,6 +37,7 @@ export type MultiSelectProps = Partial<FormFieldDataHandling<string[]>>
     initialValue?: string[],
     placeholder?: string,
     showSearch?: boolean,
+    color?: ColorPairToken,
     style?: StyleProp<ViewStyle>,
   }
 
@@ -43,6 +47,7 @@ export const MultiSelect = ({
   initialValue = [],
   placeholder = 'Select…',
   showSearch = true,
+  color,
   disabled = false,
   readOnly = false,
   invalid = false,
@@ -51,6 +56,7 @@ export const MultiSelect = ({
   style,
 }: MultiSelectProps) => {
   const { theme } = useTheme()
+  const translation = useTranslation()
   const interactive = !disabled && !readOnly
 
   const multiSelect = useMultiSelect({
@@ -61,66 +67,105 @@ export const MultiSelect = ({
     onEditComplete,
   })
 
-  const selectedLabels = useMemo(() => {
-    return options
-      .filter((option) => multiSelect.isSelected(option.id))
-      .map((option) => option.label ?? option.id)
+  const selectedOptions = useMemo(() => {
+    return options.filter((option) => multiSelect.isSelected(option.id))
   }, [multiSelect, options])
 
   const state = useMemo((): MultiSelectState => ({
+    color,
     isDisabled: disabled,
-    isReadOnly: readOnly,
+    isReadonly: readOnly,
     isInvalid: invalid,
     isOpen: multiSelect.isOpen,
-    hasSelections: selectedLabels.length > 0,
-    hasValue: selectedLabels.length > 0,
-  }), [disabled, invalid, multiSelect.isOpen, readOnly, selectedLabels.length])
+    hasSelections: selectedOptions.length > 0,
+    hasValue: selectedOptions.length > 0,
+  }), [color, disabled, invalid, multiSelect.isOpen, readOnly, selectedOptions.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]
+    () => multiSelectTheme.overlay({}),
+    [multiSelectTheme]
   )
   const resolvedMenuStyle = useMemo(
-    () => multiSelectTheme.menu(state),
-    [multiSelectTheme, state]
+    () => multiSelectTheme.menu({ hasSearch: showSearch }),
+    [multiSelectTheme, showSearch]
   )
-  const resolvedSearchStyle = useMemo(
-    () => multiSelectTheme.search(state),
-    [multiSelectTheme, state]
+  const resolvedHeaderStyle = useMemo(
+    () => multiSelectTheme.header({}),
+    [multiSelectTheme]
   )
-  const searchPlaceholderColor = useMemo(
-    () => multiSelectTheme.searchPlaceholderColor(state),
-    [multiSelectTheme, state]
+  const resolvedEmptyTextStyle = useMemo(
+    () => multiSelectTheme.emptyText({}),
+    [multiSelectTheme]
   )
+  const visibleOptions = useMemo(
+    () => options.filter((option) => multiSelect.visibleOptionIds.includes(option.id)),
+    [options, multiSelect.visibleOptionIds]
+  )
+  const showEmptySearchResults = showSearch
+    && multiSelect.searchQuery.trim().length > 0
+    && visibleOptions.length === 0
 
   return (
-    <View style={style}>
+    <View style={[{ width: '100%' }, style]}>
       <Pressable
         disabled={!interactive}
         onPress={() => multiSelect.toggleOpen()}
-        style={resolvedTriggerStyle}
+        style={(pressableState) => {
+          const interaction = pressableState as {
+            pressed: boolean,
+            hovered?: boolean,
+            focused?: boolean,
+            focusVisible?: boolean,
+          }
+          return multiSelectTheme.trigger({
+            ...state,
+            isPressed: interaction.pressed,
+            isHovered: !!interaction.hovered,
+            isFocused: !!interaction.focused,
+            isFocusVisible: !!interaction.focusVisible,
+          })
+        }}
       >
-        {selectedLabels.length > 0
+        {selectedOptions.length > 0
           ? (
-            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
-              {selectedLabels.map((label) => (
-                <Chip key={label} size="sm" color="primary" coloringStyle="tonal">
-                  {label}
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, flex: 1 }}>
+              {selectedOptions.map((option) => (
+                <Chip key={option.id} size="md" color={color} variant="tonal">
+                  <ThemedText>{option.label ?? option.id}</ThemedText>
+                  {!state.isReadonly && (
+                    <View
+                      style={{
+                        position: 'relative',
+                        width: theme.icongraphy.sizes.sm,
+                      }}
+                    >
+                      <IconButton
+                        accessibilityLabel={translation('remove')}
+                        size="sm"
+                        color={theme.colors.negative}
+                        variant="foreground"
+                        disabled={!interactive}
+                        onPress={() => multiSelect.toggleSelection(option.id, false)}
+                        style={{
+                          position: 'absolute',
+                          left: '50%',
+                          top: '50%',
+                          transform: [
+                            { translateX: '-50%' },
+                            { translateY: '-50%' },
+                          ],
+                        }}
+                        icon={HightideIconRegistry.X}
+                      />
+                    </View>
+                  )}
                 </Chip>
               ))}
             </View>
           )
-          : <Text style={resolvedTriggerTextStyle}>{placeholder}</Text>}
+          : <ThemedText style={multiSelectTheme.triggerText(state)}>{placeholder}</ThemedText>}
       </Pressable>
 
       <Modal
@@ -138,45 +183,67 @@ export const MultiSelect = ({
             onPress={(event) => event.stopPropagation()}
           >
             {showSearch && (
-              <TextInput
-                value={multiSelect.searchQuery}
-                onChangeText={multiSelect.setSearchQuery}
-                placeholder="Search…"
-                placeholderTextColor={searchPlaceholderColor}
-                style={resolvedSearchStyle}
-              />
+              <View style={resolvedHeaderStyle}>
+                <SearchBar
+                  value={multiSelect.searchQuery}
+                  onValueChange={multiSelect.setSearchQuery}
+                  onSearch={multiSelect.setSearchQuery}
+                />
+              </View>
             )}
-            <FlatList
-              data={options.filter((option) => multiSelect.visibleOptionIds.includes(option.id))}
-              keyExtractor={(option) => option.id}
-              renderItem={({ item }) => {
-                const selected = multiSelect.isSelected(item.id)
-                const isHighlighted = multiSelect.highlightedId === item.id
-                const optionState = {
-                  isSelected: selected,
-                  isHighlighted,
-                  isDisabled: item.disabled,
-                }
-                const checkboxIcon = multiSelectTheme.checkboxIcon(optionState)
+            {showEmptySearchResults ? (
+              <View
+                style={{
+                  flex: 1,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <ThemedText style={resolvedEmptyTextStyle}>
+                  {translation('nothingFound')}
+                </ThemedText>
+              </View>
+            ) : (
+              <FlatList
+                data={visibleOptions}
+                keyExtractor={(option) => option.id}
+                style={{ flex: 1 }}
+                renderItem={({ item }) => {
+                  const selected = multiSelect.isSelected(item.id)
+                  const isHighlighted = multiSelect.highlightedId === item.id
+                  const optionState = {
+                    color,
+                    isSelected: selected,
+                    isHighlighted,
+                    isDisabled: item.disabled,
+                  }
+                  const checkboxIcon = multiSelectTheme.checkboxIcon(optionState)
+                  const optionColor = selected
+                    ? (color ?? theme.colors.primary)
+                    : undefined
 
-                return (
-                  <Pressable
-                    disabled={item.disabled}
-                    onPress={() => multiSelect.toggleSelection(item.id)}
-                    style={multiSelectTheme.option(optionState)}
-                  >
-                    <View style={multiSelectTheme.checkbox(optionState)}>
-                      {checkboxIcon.visible && (
-                        <Icon icon={Check} size="sm" color={checkboxIcon.color} />
+                  return (
+                    <ListActionItem
+                      label={item.label ?? item.id}
+                      color={optionColor}
+                      disabled={item.disabled}
+                      onPress={() => multiSelect.toggleSelection(item.id)}
+                      leading={(
+                        <View style={multiSelectTheme.checkbox(optionState)}>
+                          {checkboxIcon.visible && (
+                            <ThemedIcon
+                              icon={HightideIconRegistry.Check}
+                              size="sm"
+                              color={checkboxIcon.color}
+                            />
+                          )}
+                        </View>
                       )}
-                    </View>
-                    <Text style={multiSelectTheme.optionText(optionState)}>
-                      {item.label}
-                    </Text>
-                  </Pressable>
-                )
-              }}
-            />
+                    />
+                  )
+                }}
+              />
+            )}
           </Pressable>
         </Pressable>
       </Modal>