@helpwave/hightide-native 0.1.1 → 0.3.0

package/src/components/list/ListItem.tsx

@@ -12,7 +12,6 @@ import {
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
   ListItemDescriptionStyle,
   ListItemState,
@@ -20,29 +19,38 @@ import type {
   ListItemTitleStyle
 } from '../../theme/types/components/listItem'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { ListItemAccessory } from './ListItemAccessory'
+import {
+  ListItemTextContent,
+  type ListItemContentOrder
+} from './ListItemTextContent'
 
 export type ListItemProps = Omit<ViewProps, 'style'> & {
-  label: string,
-  value: string,
+  title?: string,
+  subtitle?: string,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
   leading?: ReactNode,
   trailing?: ReactNode,
   color?: ColorPairToken,
   style?: StyleProp<ViewStyle>,
   itemStyle?: StyleOverwrite<ListItemState, ListItemStyle>,
-  labelStyle?: StyleOverwrite<ListItemState, ListItemDescriptionStyle>,
-  valueStyle?: StyleOverwrite<ListItemState, ListItemTitleStyle>,
+  titleStyle?: StyleOverwrite<ListItemState, ListItemTitleStyle>,
+  subtitleStyle?: StyleOverwrite<ListItemState, ListItemDescriptionStyle>,
 }
 
 export const ListItem = ({
-  label,
-  value,
+  title,
+  subtitle,
+  content,
+  contentOrder = 'subtitleFirst',
   leading,
   trailing,
   color,
   style,
   itemStyle,
-  labelStyle,
-  valueStyle,
+  titleStyle,
+  subtitleStyle,
   ...props
 }: ListItemProps) => {
   const { theme } = useTheme()
@@ -66,30 +74,48 @@ export const ListItem = ({
     () => theme.components.listItem.default.trailingItemContainer(state),
     [theme, state]
   )
-  const resolvedLabelStyle = useMemo(
-    () => theme.components.listItem.default.descriptionText(state, labelStyle),
-    [theme, state, labelStyle]
+  const resolvedTitleStyle = useMemo(
+    () => theme.components.listItem.default.titleText(state, titleStyle),
+    [theme, state, titleStyle]
+  )
+  const resolvedSubtitleStyle = useMemo(
+    () => theme.components.listItem.default.descriptionText(state, subtitleStyle),
+    [theme, state, subtitleStyle]
   )
-  const resolvedValueStyle = useMemo(
-    () => theme.components.listItem.default.titleText(state, valueStyle),
-    [theme, state, valueStyle]
+  const resolvedIconStyle = useMemo(
+    () => theme.components.listItem.default.icon(state),
+    [theme, state]
   )
 
   return (
     <View {...props} style={[resolvedItemStyle, style]}>
       {leading != null && (
-        <View style={resolvedLeadingItemContainerStyle}>
+        <ListItemAccessory
+          style={resolvedLeadingItemContainerStyle}
+          foreground={color?.onColor}
+          iconStyle={resolvedIconStyle}
+        >
           {leading}
-        </View>
+        </ListItemAccessory>
       )}
       <View style={resolvedContentStyle}>
-        <ThemedText style={resolvedLabelStyle}>{label}</ThemedText>
-        <ThemedText style={resolvedValueStyle}>{value}</ThemedText>
+        <ListItemTextContent
+          title={title}
+          subtitle={subtitle}
+          content={content}
+          contentOrder={contentOrder}
+          titleStyle={resolvedTitleStyle}
+          subtitleStyle={resolvedSubtitleStyle}
+        />
       </View>
       {trailing != null && (
-        <View style={resolvedTrailingItemContainerStyle}>
+        <ListItemAccessory
+          style={resolvedTrailingItemContainerStyle}
+          foreground={color?.onColor}
+          iconStyle={resolvedIconStyle}
+        >
           {trailing}
-        </View>
+        </ListItemAccessory>
       )}
     </View>
   )

package/src/components/list/ListItemAccessory.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+import {
+  View,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+
+import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import type { IconStyle } from '../../icons'
+
+export type ListItemAccessoryProps = {
+  children: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  foreground?: HexColorToken,
+  iconStyle: IconStyle,
+}
+
+export const ListItemAccessory = ({
+  children,
+  style,
+  foreground,
+  iconStyle,
+}: ListItemAccessoryProps) => (
+  <View style={style}>
+    <ContentThemeOverrideProvider
+      foreground={foreground}
+      iconStyle={iconStyle}
+    >
+      {children}
+    </ContentThemeOverrideProvider>
+  </View>
+)

package/src/components/list/ListItemTextContent.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react'
+import { Fragment } from 'react'
+import type { StyleProp, TextStyle } from 'react-native'
+
+import { ThemedText } from '../visualization-and-display/ThemedText'
+
+export type ListItemContentOrder = 'titleFirst' | 'subtitleFirst'
+
+export type ListItemTextContentProps = {
+  title?: string,
+  subtitle?: string,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
+}
+
+export const ListItemTextContent = ({
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
+  titleStyle,
+  subtitleStyle,
+}: ListItemTextContentProps & {
+  titleStyle?: StyleProp<TextStyle>,
+  subtitleStyle?: StyleProp<TextStyle>,
+}) => {
+  if (content != null) {
+    return <>{content}</>
+  }
+
+  const titleNode = title != null
+    ? <ThemedText style={titleStyle}>{title}</ThemedText>
+    : null
+  const subtitleNode = subtitle != null
+    ? <ThemedText style={subtitleStyle}>{subtitle}</ThemedText>
+    : null
+
+  if (contentOrder === 'subtitleFirst') {
+    return (
+      <Fragment>
+        {subtitleNode}
+        {titleNode}
+      </Fragment>
+    )
+  }
+
+  return (
+    <Fragment>
+      {titleNode}
+      {subtitleNode}
+    </Fragment>
+  )
+}

package/src/components/list/ListNavigationItem.tsx

@@ -14,22 +14,34 @@ import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
 import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
-import { ThemedText } from '../visualization-and-display/ThemedText'
+import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
+  ListNavigationItemDescriptionStyle,
   ListNavigationItemState,
   ListNavigationItemStyle,
   ListNavigationItemTitleStyle
 } from '../../theme/types/components/listItem'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
+import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
+import { ListItemAccessory } from './ListItemAccessory'
+import {
+  ListItemTextContent,
+  type ListItemContentOrder
+} from './ListItemTextContent'
 
 export type ListNavigationItemProps = Omit<PressableProps, 'children' | 'style'> & {
-  label: string,
+  title?: string,
+  subtitle?: string,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
   leading?: ReactNode,
   color?: ColorPairToken,
   style?: StyleProp<ViewStyle>,
   itemStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemStyle>,
-  labelStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemTitleStyle>,
+  titleStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemTitleStyle>,
+  subtitleStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemDescriptionStyle>,
 }
 
 type PressableInteraction = {
@@ -40,16 +52,28 @@ type PressableInteraction = {
 }
 
 export const ListNavigationItem = ({
-  label,
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
   leading,
   color,
   disabled,
   style,
   itemStyle,
-  labelStyle,
+  titleStyle,
+  subtitleStyle,
+  hitSlop: providedHitSlop,
+  onLayout: providedOnLayout,
   ...props
 }: ListNavigationItemProps) => {
   const { theme } = useTheme()
+  const { hitBox } = useDebugContext()
+  const { hitSlop, onLayout } = useMinimumTouchTargetHitSlop({
+    touchTargetSize: theme.semantics.touchTargetSize({}),
+    hitSlop: providedHitSlop,
+    onLayout: providedOnLayout,
+  })
 
   const resolveState = (interaction: PressableInteraction): ListNavigationItemState => ({
     color,
@@ -64,6 +88,8 @@ export const ListNavigationItem = ({
     <Pressable
       {...props}
       disabled={disabled}
+      hitSlop={hitSlop}
+      onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return [theme.components.listItem.navigation.container(state, itemStyle), style]
@@ -74,26 +100,44 @@ export const ListNavigationItem = ({
         const resolvedLeadingItemContainerStyle = theme.components.listItem.navigation.leadingItemContainer(state)
         const resolvedContentStyle = theme.components.listItem.navigation.content(state)
         const resolvedTrailingItemContainerStyle = theme.components.listItem.navigation.trailingItemContainer(state)
-        const resolvedLabelStyle = theme.components.listItem.navigation.titleText(state, labelStyle)
-        const resolvedIcon = theme.components.listItem.navigation.icon(state)
+        const resolvedTitleStyle = theme.components.listItem.navigation.titleText(state, titleStyle)
+        const resolvedSubtitleStyle = theme.components.listItem.navigation.descriptionText(state, subtitleStyle)
+        const resolvedIconStyle = theme.components.listItem.navigation.icon(state)
 
         return (
           <Fragment>
+            {hitBox.isVisualizing && (
+              <View
+                pointerEvents="none"
+                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+              />
+            )}
             {leading != null && (
-              <View style={resolvedLeadingItemContainerStyle}>
+              <ListItemAccessory
+                style={resolvedLeadingItemContainerStyle}
+                foreground={color?.onColor}
+                iconStyle={resolvedIconStyle}
+              >
                 {leading}
-              </View>
+              </ListItemAccessory>
             )}
             <View style={resolvedContentStyle}>
-              <ThemedText style={resolvedLabelStyle}>{label}</ThemedText>
-            </View>
-            <View style={resolvedTrailingItemContainerStyle}>
-              <ThemedIcon
-                icon={HightideIconRegistry.ChevronRight}
-                size={resolvedIcon.size}
-                color={resolvedIcon.color}
+              <ListItemTextContent
+                title={title}
+                subtitle={subtitle}
+                content={content}
+                contentOrder={contentOrder}
+                titleStyle={resolvedTitleStyle}
+                subtitleStyle={resolvedSubtitleStyle}
               />
             </View>
+            <ListItemAccessory
+              style={resolvedTrailingItemContainerStyle}
+              foreground={color?.onColor}
+              iconStyle={resolvedIconStyle}
+            >
+              <ThemedIcon icon={HightideIconRegistry.ChevronRight} />
+            </ListItemAccessory>
           </Fragment>
         )
       }}

package/src/components/list/index.ts

@@ -1,3 +1,5 @@
 export * from './ListActionItem'
 export * from './ListItem'
+export * from './ListItemAccessory'
+export * from './ListItemTextContent'
 export * from './ListNavigationItem'

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

@@ -10,7 +10,7 @@ import {
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type { ComponentSize, ButtonVariant } from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type { IconComponent } from '../../icons/types'
@@ -20,7 +20,6 @@ import type {
   ButtonTextStyle
 } from '../../theme/types/components/button'
 import type { StyleOverwrite } from '../../theme/types/resolver'
-import type { Color } from '../../theme/types/color'
 import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
 import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
@@ -122,26 +121,18 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
               pointerEvents="none"
               style={theme.components.button.stateLayer(state, stateLayerStyle)}
             />
-            <ContentThemeProvider
-              foregroundColor={resolvedText.color as Color}
+            <ContentThemeOverrideProvider
               textStyle={resolvedText}
+              iconStyle={resolvedIcon}
             >
               {leadingIcon !== undefined && (
-                <ThemedIcon
-                  icon={leadingIcon}
-                  size={resolvedIcon.size}
-                  strokeWidth={resolvedIcon.strokeWidth}
-                />
+                <ThemedIcon icon={leadingIcon} />
               )}
               <ThemedText>{children}</ThemedText>
               {trailingIcon !== undefined && (
-                <ThemedIcon
-                  icon={trailingIcon}
-                  size={resolvedIcon.size}
-                  strokeWidth={resolvedIcon.strokeWidth}
-                />
+                <ThemedIcon icon={trailingIcon} />
               )}
-            </ContentThemeProvider>
+            </ContentThemeOverrideProvider>
           </Fragment>
         )
       }}

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

@@ -12,7 +12,7 @@ import type {
   IconButtonVariant
 } from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
@@ -105,7 +105,6 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         const resolvedIcon = theme.components.iconButton.icon(state)
-        const resolvedText = theme.components.iconButton.text(state)
 
         return (
           <Fragment>
@@ -119,12 +118,11 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
               pointerEvents="none"
               style={theme.components.iconButton.stateLayer(state, stateLayerStyle)}
             />
-            <ContentThemeProvider
-              foregroundColor={resolvedIcon.color ?? theme.colors.primary.color}
-              textStyle={resolvedText}
+            <ContentThemeOverrideProvider
+              iconStyle={resolvedIcon}
             >
-              <ThemedIcon icon={IconComponent} size={resolvedIcon.size} strokeWidth={resolvedIcon.strokeWidth}/>
-            </ContentThemeProvider>
+              <ThemedIcon icon={IconComponent} />
+            </ContentThemeOverrideProvider>
           </Fragment>
         )
       }}

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { Fragment, useMemo } from 'react'
 import {
   FlatList,
   Modal,
@@ -128,44 +128,72 @@ export const MultiSelect = ({
           })
         }}
       >
-        {selectedOptions.length > 0
-          ? (
-            <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>
+        {(pressableState) => {
+          const interaction = pressableState as {
+            pressed: boolean,
+            hovered?: boolean,
+            focused?: boolean,
+            focusVisible?: boolean,
+          }
+          const triggerState = {
+            ...state,
+            isPressed: interaction.pressed,
+            isHovered: !!interaction.hovered,
+            isFocused: !!interaction.focused,
+            isFocusVisible: !!interaction.focusVisible,
+          }
+
+          return (
+            <Fragment>
+              <View
+                pointerEvents="none"
+                style={multiSelectTheme.stateLayer(triggerState)}
+              />
+              {selectedOptions.length > 0
+                ? (
+                  <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>
+                )
+                : (
+                  <ThemedText style={multiSelectTheme.triggerText(triggerState)}>
+                    {placeholder}
+                  </ThemedText>
+                )}
+            </Fragment>
           )
-          : <ThemedText style={multiSelectTheme.triggerText(state)}>{placeholder}</ThemedText>}
+        }}
       </Pressable>
 
       <Modal
@@ -224,19 +252,17 @@ export const MultiSelect = ({
 
                   return (
                     <ListActionItem
-                      label={item.label ?? item.id}
+                      title={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}
-                            />
-                          )}
+                          <ThemedIcon
+                            icon={HightideIconRegistry.Check}
+                            size="sm"
+                            color={checkboxIcon.color}
+                          />
                         </View>
                       )}
                     />

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

@@ -149,6 +149,10 @@ export const Select = ({
 
           return (
             <Fragment>
+              <View
+                pointerEvents="none"
+                style={selectTheme.stateLayer(triggerState)}
+              />
               <ThemedText style={[selectTheme.triggerText(triggerState), { flex: 1 }]}>
                 {selectedLabel}
               </ThemedText>
@@ -212,7 +216,7 @@ export const Select = ({
 
                   return (
                     <ListActionItem
-                      label={item.label ?? item.id}
+                      title={item.label ?? item.id}
                       color={optionColor}
                       disabled={item.disabled}
                       onPress={() => select.selectValue(item.id)}

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

@@ -12,10 +12,11 @@ import type {
 } from '@helpwave/hightide-design/semantic-token-resolvers'
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
-import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
+  ThemedPressableIconStyle,
   ThemedPressableState,
   ThemedPressableStyle,
   ThemedPressableTextStyle
@@ -40,6 +41,7 @@ export type ThemedPressableProps = PressableProps & {
   hasAdditionalHorizontalPadding?: boolean,
   containerStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
   stateLayerStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
+  iconStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableIconStyle>,
   textStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableTextStyle>,
 }
 
@@ -61,6 +63,7 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
   style,
   containerStyle,
   stateLayerStyle,
+  iconStyle,
   textStyle,
   hitSlop: providedHitSlop,
   onLayout: providedOnLayout,
@@ -106,6 +109,7 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         const resolvedText = theme.components.themedPressable.text(state, textStyle)
+        const resolvedIcon = theme.components.themedPressable.icon(state, iconStyle)
         const resolvedChildren = typeof children === 'function'
           ? children(pressableState)
           : children
@@ -122,12 +126,13 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
               pointerEvents="none"
               style={theme.components.themedPressable.stateLayer(state, stateLayerStyle)}
             />
-            <ContentThemeProvider
-              foregroundColor={resolvedText.color ?? theme.colors.surface.onColor}
+            <ContentThemeOverrideProvider
+              foreground={resolvedText.color}
               textStyle={resolvedText}
+              iconStyle={resolvedIcon}
             >
               {resolvedChildren}
-            </ContentThemeProvider>
+            </ContentThemeOverrideProvider>
           </Fragment>
         )
       }}