@helpwave/hightide-native 0.0.8 → 0.1.1

package/src/components/list/ListActionItem.tsx

@@ -0,0 +1,99 @@
+import {
+  Fragment,
+  type ReactNode
+} from 'react'
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+
+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 {
+  ListActionItemState,
+  ListActionItemStyle,
+  ListActionItemTitleStyle
+} from '../../theme/types/components/listItem'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+
+export type ListActionItemProps = Omit<PressableProps, 'children' | 'style'> & {
+  label: string,
+  leading?: ReactNode,
+  trailing?: ReactNode,
+  color?: ColorPairToken,
+  style?: StyleProp<ViewStyle>,
+  itemStyle?: StyleOverwrite<ListActionItemState, ListActionItemStyle>,
+  labelStyle?: StyleOverwrite<ListActionItemState, ListActionItemTitleStyle>,
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+  focusVisible?: boolean,
+}
+
+export const ListActionItem = ({
+  label,
+  leading,
+  trailing,
+  color,
+  disabled,
+  style,
+  itemStyle,
+  labelStyle,
+  ...props
+}: ListActionItemProps) => {
+  const { theme } = useTheme()
+
+  const resolveState = (interaction: PressableInteraction): ListActionItemState => ({
+    color,
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+    isFocusVisible: !!interaction.focusVisible,
+  })
+
+  return (
+    <Pressable
+      {...props}
+      disabled={disabled}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.listItem.action.container(state, itemStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedLeadingItemContainerStyle = theme.components.listItem.action.leadingItemContainer(state)
+        const resolvedContentStyle = theme.components.listItem.action.content(state)
+        const resolvedTrailingItemContainerStyle = theme.components.listItem.action.trailingItemContainer(state)
+        const resolvedLabelStyle = theme.components.listItem.action.titleText(state, labelStyle)
+
+        return (
+          <Fragment>
+            {leading != null && (
+              <View style={resolvedLeadingItemContainerStyle}>
+                {leading}
+              </View>
+            )}
+            <View style={resolvedContentStyle}>
+              <ThemedText style={resolvedLabelStyle}>{label}</ThemedText>
+            </View>
+            {trailing != null && (
+              <View style={resolvedTrailingItemContainerStyle}>
+                {trailing}
+              </View>
+            )}
+          </Fragment>
+        )
+      }}
+    </Pressable>
+  )
+}

package/src/components/list/ListItem.tsx

@@ -0,0 +1,96 @@
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+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,
+  ListItemStyle,
+  ListItemTitleStyle
+} from '../../theme/types/components/listItem'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+
+export type ListItemProps = Omit<ViewProps, 'style'> & {
+  label: string,
+  value: string,
+  leading?: ReactNode,
+  trailing?: ReactNode,
+  color?: ColorPairToken,
+  style?: StyleProp<ViewStyle>,
+  itemStyle?: StyleOverwrite<ListItemState, ListItemStyle>,
+  labelStyle?: StyleOverwrite<ListItemState, ListItemDescriptionStyle>,
+  valueStyle?: StyleOverwrite<ListItemState, ListItemTitleStyle>,
+}
+
+export const ListItem = ({
+  label,
+  value,
+  leading,
+  trailing,
+  color,
+  style,
+  itemStyle,
+  labelStyle,
+  valueStyle,
+  ...props
+}: ListItemProps) => {
+  const { theme } = useTheme()
+  const state = useMemo((): ListItemState => ({
+    color,
+  }), [color])
+
+  const resolvedItemStyle = useMemo(
+    () => theme.components.listItem.default.container(state, itemStyle),
+    [theme, state, itemStyle]
+  )
+  const resolvedLeadingItemContainerStyle = useMemo(
+    () => theme.components.listItem.default.leadingItemContainer(state),
+    [theme, state]
+  )
+  const resolvedContentStyle = useMemo(
+    () => theme.components.listItem.default.content(state),
+    [theme, state]
+  )
+  const resolvedTrailingItemContainerStyle = useMemo(
+    () => theme.components.listItem.default.trailingItemContainer(state),
+    [theme, state]
+  )
+  const resolvedLabelStyle = useMemo(
+    () => theme.components.listItem.default.descriptionText(state, labelStyle),
+    [theme, state, labelStyle]
+  )
+  const resolvedValueStyle = useMemo(
+    () => theme.components.listItem.default.titleText(state, valueStyle),
+    [theme, state, valueStyle]
+  )
+
+  return (
+    <View {...props} style={[resolvedItemStyle, style]}>
+      {leading != null && (
+        <View style={resolvedLeadingItemContainerStyle}>
+          {leading}
+        </View>
+      )}
+      <View style={resolvedContentStyle}>
+        <ThemedText style={resolvedLabelStyle}>{label}</ThemedText>
+        <ThemedText style={resolvedValueStyle}>{value}</ThemedText>
+      </View>
+      {trailing != null && (
+        <View style={resolvedTrailingItemContainerStyle}>
+          {trailing}
+        </View>
+      )}
+    </View>
+  )
+}

package/src/components/list/ListNavigationItem.tsx

@@ -0,0 +1,102 @@
+import {
+  Fragment,
+  type ReactNode
+} from 'react'
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+
+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 { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type {
+  ListNavigationItemState,
+  ListNavigationItemStyle,
+  ListNavigationItemTitleStyle
+} from '../../theme/types/components/listItem'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+
+export type ListNavigationItemProps = Omit<PressableProps, 'children' | 'style'> & {
+  label: string,
+  leading?: ReactNode,
+  color?: ColorPairToken,
+  style?: StyleProp<ViewStyle>,
+  itemStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemStyle>,
+  labelStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemTitleStyle>,
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+  focusVisible?: boolean,
+}
+
+export const ListNavigationItem = ({
+  label,
+  leading,
+  color,
+  disabled,
+  style,
+  itemStyle,
+  labelStyle,
+  ...props
+}: ListNavigationItemProps) => {
+  const { theme } = useTheme()
+
+  const resolveState = (interaction: PressableInteraction): ListNavigationItemState => ({
+    color,
+    isDisabled: !!disabled,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+    isFocusVisible: !!interaction.focusVisible,
+  })
+
+  return (
+    <Pressable
+      {...props}
+      disabled={disabled}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.listItem.navigation.container(state, itemStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        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)
+
+        return (
+          <Fragment>
+            {leading != null && (
+              <View style={resolvedLeadingItemContainerStyle}>
+                {leading}
+              </View>
+            )}
+            <View style={resolvedContentStyle}>
+              <ThemedText style={resolvedLabelStyle}>{label}</ThemedText>
+            </View>
+            <View style={resolvedTrailingItemContainerStyle}>
+              <ThemedIcon
+                icon={HightideIconRegistry.ChevronRight}
+                size={resolvedIcon.size}
+                color={resolvedIcon.color}
+              />
+            </View>
+          </Fragment>
+        )
+      }}
+    </Pressable>
+  )
+}

package/src/components/list/index.ts

@@ -0,0 +1,3 @@
+export * from './ListActionItem'
+export * from './ListItem'
+export * from './ListNavigationItem'

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

@@ -1,49 +1,50 @@
-import {
-  forwardRef,
-  type ReactNode
-} from 'react'
+import { Fragment, forwardRef } from 'react'
 import {
   Pressable,
-  Text,
+  View,
   type PressableProps,
   type StyleProp,
   type ViewStyle
 } from 'react-native'
 
-import {
-  coloringTypes,
-  type ColoringType
-} from '@helpwave/hightide-design/utils'
-import type {
-  ButtonColoringStyle,
-  ElementSize
-} from '@helpwave/hightide-design/types'
+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 { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type { IconComponent } from '../../icons/types'
 import type {
   ButtonState,
   ButtonStyle,
   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'
+import { ThemedText } from '../visualization-and-display/ThemedText'
 
-export type ButtonSize = ElementSize
+export type ButtonSize = ComponentSize
 
-export type ButtonColor = ColoringType
+export type ButtonColor = ColorPairToken
 
 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[],
+  sizes: ['xs', 'sm', 'md', 'lg', 'xl'] as const satisfies readonly ComponentSize[],
+  variants: ['elevated', 'filled', 'tonal', 'outlined', 'foreground'] as const satisfies readonly ButtonVariant[],
 }
 
 export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   size?: ButtonSize,
   color?: ButtonColor,
-  coloringStyle?: ButtonColoringStyle,
-  children?: ReactNode,
+  variant?: ButtonVariant,
+  children: string,
+  leadingIcon?: IconComponent,
+  trailingIcon?: IconComponent,
   style?: StyleProp<ViewStyle>,
-  buttonStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
+  containerStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
+  stateLayerStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
   textStyle?: StyleOverwrite<ButtonState, ButtonTextStyle>,
 }
 
@@ -51,29 +52,42 @@ type PressableInteraction = {
   pressed: boolean,
   hovered?: boolean,
   focused?: boolean,
+  focusVisible?: boolean,
 }
 
 export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonProps>(function Button({
   children,
   size = 'md',
-  color = 'primary',
-  coloringStyle = 'solid',
+  color,
+  variant = 'filled',
   disabled,
+  leadingIcon,
+  trailingIcon,
   style,
-  buttonStyle,
+  containerStyle,
+  stateLayerStyle,
   textStyle,
+  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): ButtonState => ({
     size,
     color,
-    coloringStyle,
+    variant,
     isDisabled: !!disabled,
     isPressed: interaction.pressed,
     isHovered: !!interaction.hovered,
     isFocused: !!interaction.focused,
+    isFocusVisible: !!interaction.focusVisible,
   })
 
   return (
@@ -81,20 +95,55 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
       {...props}
       ref={ref}
       disabled={disabled}
+      hitSlop={hitSlop}
+      onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        return [theme.components.button.button(state, buttonStyle), style]
+        return [
+          theme.components.button.container(state, containerStyle),
+          style,
+        ]
       }}
     >
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         const resolvedText = theme.components.button.text(state, textStyle)
+        const resolvedIcon = theme.components.button.icon(state)
 
-        if (typeof children === 'string' || typeof children === 'number') {
-          return <Text style={resolvedText}>{children}</Text>
-        }
-
-        return children
+        return (
+          <Fragment>
+            {hitBox.isVisualizing && (
+              <View
+                pointerEvents="none"
+                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+              />
+            )}
+            <View
+              pointerEvents="none"
+              style={theme.components.button.stateLayer(state, stateLayerStyle)}
+            />
+            <ContentThemeProvider
+              foregroundColor={resolvedText.color as Color}
+              textStyle={resolvedText}
+            >
+              {leadingIcon !== undefined && (
+                <ThemedIcon
+                  icon={leadingIcon}
+                  size={resolvedIcon.size}
+                  strokeWidth={resolvedIcon.strokeWidth}
+                />
+              )}
+              <ThemedText>{children}</ThemedText>
+              {trailingIcon !== undefined && (
+                <ThemedIcon
+                  icon={trailingIcon}
+                  size={resolvedIcon.size}
+                  strokeWidth={resolvedIcon.strokeWidth}
+                />
+              )}
+            </ContentThemeProvider>
+          </Fragment>
+        )
       }}
     </Pressable>
   )

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

@@ -1,28 +1,28 @@
 import {
-  useCallback,
-  useMemo
+  Fragment,
+  useCallback
 } from 'react'
 import {
   Pressable,
+  View,
   type PressableProps,
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import {
-  Check,
-  Minus
-} from 'lucide-react-native'
-
 import {
   useControlledState,
   useEventCallbackStabilizer
 } from '@helpwave/hightide-utils/hooks'
 
-import { Icon } from '../visualization-and-display/Icon'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
+import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
+import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   CheckboxSize,
   CheckboxState,
+  CheckboxStateLayerStyle,
   CheckboxStyle
 } from '../../theme/types/components/checkbox'
 import type { StyleOverwrite } from '../../theme/types/resolver'
@@ -30,8 +30,8 @@ import type {
   FormFieldDataHandling,
   FormFieldInteractionStates
 } from '../../types/formField'
-
-export type { CheckboxSize }
+import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
+import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
 
 export type CheckboxProps = Omit<PressableProps, 'children' | 'style'>
   & Partial<FormFieldInteractionStates>
@@ -40,12 +40,20 @@ export type CheckboxProps = Omit<PressableProps, 'children' | 'style'>
     initialValue?: boolean,
     indeterminate?: boolean,
     size?: CheckboxSize,
-    alwaysShowCheckIcon?: boolean,
     isRounded?: boolean,
+    color?: ColorPairToken,
     style?: StyleProp<ViewStyle>,
-    checkboxStyle?: StyleOverwrite<CheckboxState, CheckboxStyle>,
+    containerStyle?: StyleOverwrite<CheckboxState, CheckboxStyle>,
+    stateLayerStyle?: StyleOverwrite<CheckboxState, CheckboxStateLayerStyle>,
   }
 
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+  focusVisible?: boolean,
+}
+
 export const Checkbox = ({
   value: controlledValue,
   initialValue = false,
@@ -56,13 +64,22 @@ export const Checkbox = ({
   onValueChange,
   onEditComplete,
   size = 'md',
-  alwaysShowCheckIcon = false,
   isRounded = false,
+  color,
   style,
-  checkboxStyle,
+  containerStyle,
+  stateLayerStyle,
+  hitSlop: providedHitSlop,
+  onLayout: providedOnLayout,
   ...props
 }: CheckboxProps) => {
   const { theme } = useTheme()
+  const { hitBox } = useDebugContext()
+  const { hitSlop, onLayout } = useMinimumTouchTargetHitSlop({
+    touchTargetSize: theme.semantics.touchTargetSize({}),
+    hitSlop: providedHitSlop,
+    onLayout: providedOnLayout,
+  })
   const interactive = !disabled && !readOnly
 
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
@@ -79,24 +96,20 @@ export const Checkbox = ({
     defaultValue: initialValue,
   })
 
-  const state = useMemo((): CheckboxState => ({
+  const resolveState = (interaction: PressableInteraction): CheckboxState => ({
     size,
+    color,
     isChecked: value,
     isIndeterminate: indeterminate,
     isInvalid: invalid,
     isDisabled: disabled,
+    isReadonly: readOnly,
     isRounded,
-    alwaysShowCheckIcon,
-  }), [alwaysShowCheckIcon, disabled, indeterminate, invalid, isRounded, size, value])
-
-  const resolvedCheckboxStyle = useMemo(
-    () => theme.components.checkbox.checkbox(state, checkboxStyle),
-    [theme, state, checkboxStyle]
-  )
-  const resolvedIcon = useMemo(
-    () => theme.components.checkbox.icon(state),
-    [theme, state]
-  )
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+    isFocusVisible: !!interaction.focusVisible,
+  })
 
   return (
     <Pressable
@@ -107,19 +120,46 @@ export const Checkbox = ({
         checked: indeterminate ? 'mixed' : value,
         disabled,
       }}
+      hitSlop={hitSlop}
+      onLayout={onLayout}
       onPress={(event) => {
         if (interactive) {
           setValue((previous) => !previous)
         }
         props.onPress?.(event)
       }}
-      style={[resolvedCheckboxStyle, style]}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.checkbox.container(state, containerStyle), style]
+      }}
     >
-      {resolvedIcon.visible && (
-        indeterminate
-          ? <Icon icon={Minus} size={resolvedIcon.size} color={resolvedIcon.color} />
-          : <Icon icon={Check} size={resolvedIcon.size} color={resolvedIcon.color} />
-      )}
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        const resolvedIcon = theme.components.checkbox.icon(state)
+        const showIcon = !!(indeterminate || value)
+
+        return (
+          <Fragment>
+            {hitBox.isVisualizing && (
+              <View
+                pointerEvents="none"
+                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+              />
+            )}
+            <View
+              pointerEvents="none"
+              style={theme.components.checkbox.stateLayer(state, stateLayerStyle)}
+            />
+            {showIcon && (
+              <ThemedIcon
+                icon={indeterminate ? HightideIconRegistry.Minus : HightideIconRegistry.Check}
+                size={resolvedIcon.size}
+                color={resolvedIcon.color}
+              />
+            )}
+          </Fragment>
+        )
+      }}
     </Pressable>
   )
 }