@helpwave/hightide-native 0.0.8 → 0.1.1

package/src/theme/resolvers/chat/quick-reply-chip.ts

@@ -0,0 +1,80 @@
+import type {
+  ContainerTokens,
+  TextStyleTokens
+} from '@helpwave/hightide-design/component-token-resolvers'
+
+import { toContainerStyle } from '../../adapters/container-adapter'
+import { toTextStyle } from '../../adapters/text-style-adapter'
+import type {
+  ChatQuickReplyChipState,
+  ChatQuickReplyChipThemeResolvers,
+  PressableContainerStyle,
+  PressableState,
+  PressableStateLayerStyle,
+  PressableTextStyle
+} from '../../types/components/chat'
+import {
+  createStyleResolver,
+  createValueResolver,
+  toPressableInteractionState,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+const toOptionalContainerStyle = (tokens?: ContainerTokens): PressableContainerStyle => (
+  tokens === undefined ? {} : toContainerStyle(tokens)
+)
+
+const toOptionalTextStyle = (tokens?: TextStyleTokens): PressableTextStyle => (
+  tokens === undefined ? {} : toTextStyle(tokens)
+)
+
+export const toChatQuickReplyChipThemeResolvers: ComponentThemeResolver<ChatQuickReplyChipThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (isActive?: boolean) => componentTokens.chat.quickReplyChip({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    config: { isActive },
+  })
+
+  return {
+    pressable: createValueResolver((state: ChatQuickReplyChipState) => {
+      const tokens = resolve(state.isActive)
+
+      const resolvePressable = (pressableState: PressableState) => componentTokens.pressable({
+        themeTokens,
+        semanticResolvers: semanticTokens,
+        overrides: {
+          size: tokens.config.size,
+          color: tokens.config.color,
+          coloringStyle: tokens.config.coloringStyle,
+          coloringColorVariant: tokens.config.coloringColorVariant,
+          hasAdditionalHorizontalPadding: tokens.config.hasAdditionalHorizontalPadding,
+        },
+        state: toPressableInteractionState(pressableState),
+      })
+
+      return {
+        container: createStyleResolver((pressableState: PressableState): PressableContainerStyle => ({
+          ...toContainerStyle(resolvePressable(pressableState).container),
+          ...toOptionalContainerStyle(tokens.container),
+        })),
+        stateLayer: createStyleResolver((pressableState: PressableState): PressableStateLayerStyle => ({
+          ...toContainerStyle(resolvePressable(pressableState).stateLayer),
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          ...toOptionalContainerStyle(tokens.stateLayer),
+        })),
+        text: createStyleResolver((pressableState: PressableState): PressableTextStyle => ({
+          ...toTextStyle(resolvePressable(pressableState).text),
+          ...toOptionalTextStyle(tokens.text),
+        })),
+      }
+    }),
+  }
+}

package/src/theme/resolvers/chat/system-line.ts

@@ -0,0 +1,41 @@
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+
+import { toContainerStyle } from '../../adapters/container-adapter'
+import { toIconStyle } from '../../adapters/icon-style-adapter'
+import { toTextStyle } from '../../adapters/text-style-adapter'
+import type {
+  ChatSystemLineIconStyle,
+  ChatSystemLineState,
+  ChatSystemLineStyle,
+  ChatSystemLineTextStyle,
+  ChatSystemLineThemeResolvers
+} from '../../types/components/chat'
+import {
+  createStyleResolver,
+  createValueResolver,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+export const toChatSystemLineThemeResolvers: ComponentThemeResolver<ChatSystemLineThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (color?: ColorPairToken) => componentTokens.chat.systemLine({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: { color },
+  })
+
+  return {
+    container: createStyleResolver((state: ChatSystemLineState): ChatSystemLineStyle => (
+      toContainerStyle(resolve(state.color).container)
+    )),
+    text: createStyleResolver((state: ChatSystemLineState): ChatSystemLineTextStyle => (
+      toTextStyle(resolve(state.color).text)
+    )),
+    icon: createValueResolver((state: ChatSystemLineState): ChatSystemLineIconStyle => (
+      toIconStyle(resolve(state.color).icon)
+    )),
+  }
+}

package/src/theme/resolvers/chat/thread-header.ts

@@ -0,0 +1,85 @@
+import type { AvatarTokens } from '@helpwave/hightide-design/component-token-resolvers'
+
+import {
+  createAvatarStyleResolvers,
+  mergeAvatarTokens,
+  toDesignAvatarSize,
+  withNumericAvatarSize
+} from '../avatar'
+import { toContainerStyle } from '../../adapters/container-adapter'
+import { toTextStyle } from '../../adapters/text-style-adapter'
+import type {
+  ChatThreadHeaderContentRowStyle,
+  ChatThreadHeaderStyle,
+  ChatThreadHeaderSubtitleStyle,
+  ChatThreadHeaderThemeResolvers,
+  ChatThreadHeaderTitleStyle
+} from '../../types/components/chat'
+import type {
+  AvatarState,
+  AvatarThemeResolvers
+} from '../../types/components/avatar'
+import {
+  createSimpleStyleResolver,
+  createValueResolver,
+  type ComponentThemeResolver
+} from '../../types/resolver'
+
+export const toChatThreadHeaderThemeResolvers: ComponentThemeResolver<ChatThreadHeaderThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = () => componentTokens.chat.threadHeader({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+  })
+
+  return {
+    container: createSimpleStyleResolver((): ChatThreadHeaderStyle => (
+      toContainerStyle(resolve().container)
+    )),
+    contentRow: createSimpleStyleResolver((): ChatThreadHeaderContentRowStyle => ({
+      ...toContainerStyle(resolve().contentRow),
+      flex: 1,
+    })),
+    title: createSimpleStyleResolver((): ChatThreadHeaderTitleStyle => (
+      toTextStyle(resolve().title)
+    )),
+    subtitle: createSimpleStyleResolver((): ChatThreadHeaderSubtitleStyle => (
+      toTextStyle(resolve().subtitle)
+    )),
+    avatar: createValueResolver((state: AvatarState): AvatarThemeResolvers => {
+      const { avatarOverride } = resolve()
+
+      const resolveTokens = (avatarState: AvatarState): AvatarTokens => {
+        const tokens = mergeAvatarTokens(
+          componentTokens.avatar({
+            themeTokens,
+            semanticResolvers: semanticTokens,
+            config: {
+              isGrouped: avatarState.isGrouped,
+              groupIndex: avatarState.groupIndex,
+            },
+            overrides: {
+              color: avatarState.color ?? state.color ?? avatarOverride.overrides?.color,
+              size: toDesignAvatarSize(
+                avatarState.size ?? state.size ?? avatarOverride.overrides?.size
+              ),
+            },
+          }),
+          avatarOverride
+        )
+
+        const size = avatarState.size ?? state.size
+        if (typeof size === 'number') {
+          return withNumericAvatarSize(tokens, size)
+        }
+
+        return tokens
+      }
+
+      return createAvatarStyleResolvers(resolveTokens, themeTokens)
+    }),
+  }
+}

package/src/theme/resolvers/checkbox.ts

@@ -1,91 +1,104 @@
-import type { ViewStyle } from 'react-native'
-
-import { componentLayouts } from '@helpwave/hightide-design/tokens'
 import type {
-  ComponentColorTokens,
-  HightideThemeTokens as DesignTokensTheme,
-  ElementSize
-} from '@helpwave/hightide-design/types'
-
-import type { HightideSemanticColors } from '../types/color'
+  CheckboxState as DesignCheckboxState,
+  CheckboxStateValue
+} from '@helpwave/hightide-design/component-token-resolvers'
+import { toContainerStyle } from '../adapters/container-adapter'
+import { toIconStyle } from '../adapters/icon-style-adapter'
 import type {
-  CheckboxSize,
+  CheckboxIconStyle,
   CheckboxState,
-  CheckboxTheme
+  CheckboxStateLayerStyle,
+  CheckboxStyle,
+  CheckboxThemeResolvers
 } from '../types/components/checkbox'
 import {
   createStyleResolver,
-  createValueResolver
+  createValueResolver,
+  type ComponentThemeResolver
 } from '../types/resolver'
 
-const checkboxSizes: Record<CheckboxSize, number> = {
-  sm: 20,
-  md: 24,
-  lg: 32,
-}
+const toDesignCheckboxState = (state: CheckboxState): DesignCheckboxState => {
+  const active = new Set<CheckboxStateValue>()
 
-const checkboxIconSizes: Record<CheckboxSize, Exclude<ElementSize, 'xs'>> = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-}
+  if (state.isDisabled) {
+    active.add('disabled')
+  }
+  if (state.isFocused) {
+    active.add('focused')
+  }
+  if (state.isFocusVisible) {
+    active.add('focusVisible')
+  }
+  if (state.isHovered) {
+    active.add('hovered')
+  }
+  if (state.isPressed) {
+    active.add('pressed')
+  }
+  if (state.isReadonly) {
+    active.add('readonly')
+  }
+  if (state.isInvalid) {
+    active.add('invalid')
+  }
+  if (state.isChecked) {
+    active.add('checked')
+  }
+  if (state.isIndeterminate) {
+    active.add('indeterminate')
+  }
 
-export type CreateCheckboxThemeOptions = {
-  semantic: HightideSemanticColors,
-  component: ComponentColorTokens,
+  return active
 }
 
-export const createCheckboxTheme = ({
-  semantic,
-  component,
-}: CreateCheckboxThemeOptions): CheckboxTheme => {
-  const resolveState = (state: CheckboxState) => {
-    const size = state.size ?? 'md'
-    const dimension = checkboxSizes[size]
-    const isActive = !!(state.isChecked || state.isIndeterminate)
-    const showIndicator = !!(state.isIndeterminate || state.alwaysShowCheckIcon || state.isChecked)
-
-    const borderColor = state.isDisabled
-      ? semantic.disabled
-      : state.isInvalid
-        ? semantic.negative
-        : (isActive ? semantic.primary : component.border)
+const toNumberSize = (value: string | number | undefined): number => (
+  typeof value === 'number' ? value : 0
+)
 
-    const backgroundColor = state.isDisabled
-      ? semantic.disabled
-      : (isActive ? semantic.primary : component.input.background)
-
-    const checkbox: ViewStyle = {
-      width: dimension,
-      height: dimension,
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderWidth: componentLayouts.shared.coloringOutlineWidth,
-      borderColor,
-      borderRadius: state.isRounded ? dimension / 2 : 6,
-      backgroundColor,
-      opacity: state.isDisabled ? 0.6 : 1,
-    }
-
-    return {
-      checkbox,
-      icon: {
-        color: isActive ? semantic.onPrimary : semantic.primary,
-        size: checkboxIconSizes[size],
-        visible: showIndicator,
-      },
-    }
-  }
+export const toCheckboxThemeResolvers: ComponentThemeResolver<CheckboxThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: CheckboxState) => componentTokens.checkbox({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      size: state.size,
+      isRounded: state.isRounded,
+      color: state.color,
+    },
+    state: toDesignCheckboxState(state),
+  })
 
   return {
-    checkbox: createStyleResolver((state) => resolveState(state).checkbox),
-    icon: createValueResolver((state) => resolveState(state).icon),
-  }
-}
+    container: createStyleResolver((state: CheckboxState): CheckboxStyle => (
+      toContainerStyle(resolve(state).container)
+    )),
+    stateLayer: createStyleResolver((state: CheckboxState): CheckboxStateLayerStyle => {
+      const tokens = resolve(state)
+      const containerStyle = toContainerStyle(tokens.container)
+      const touchTargetSize = semanticTokens.touchTargetSize({ themeTokens })
+      const width = toNumberSize(containerStyle.width as string | number | undefined)
+      const height = toNumberSize(containerStyle.height as string | number | undefined)
+      const horizontal = Math.max(0, touchTargetSize - width) / 2
+      const vertical = Math.max(0, touchTargetSize - height) / 2
 
-export const createCheckboxThemeFromDesign = (theme: DesignTokensTheme): CheckboxTheme => {
-  return createCheckboxTheme({
-    semantic: theme.semanticColors,
-    component: theme.componentColors,
-  })
+      return {
+        ...toContainerStyle(tokens.stateLayer),
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        marginTop: -vertical,
+        marginRight: -horizontal,
+        marginBottom: -vertical,
+        marginLeft: -horizontal,
+      }
+    }),
+    icon: createValueResolver((state: CheckboxState): CheckboxIconStyle => (
+      toIconStyle(resolve(state).icon)
+    )),
+  }
 }

package/src/theme/resolvers/chip.ts

@@ -1,74 +1,37 @@
-import type {
-  TextStyle,
-  ViewStyle
-} from 'react-native'
-
-import {
-  componentLayouts,
-  fontWeights
-} from '@helpwave/hightide-design/tokens'
-import type { HightideThemeTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
-
-import { resolveColoringStyles } from './coloring'
-import type { HightideSemanticColors } from '../types/color'
+import { toContainerStyle } from '../adapters/container-adapter'
+import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   ChipState,
-  ChipTheme
+  ChipStyle,
+  ChipTextStyle,
+  ChipThemeResolvers
 } from '../types/components/chip'
-import type { HightideComponentThemes } from '../types/components/hightide'
-import { createStyleResolver } from '../types/resolver'
-
-export type CreateChipThemeOptions = {
-  semantic: HightideSemanticColors,
-  coloring: HightideComponentThemes['coloring'],
-}
-
-export const createChipTheme = ({
-  semantic,
-  coloring,
-}: CreateChipThemeOptions): ChipTheme => {
-  const resolveState = (state: ChipState) => {
-    const size = state.size ?? 'md'
-    const color = state.color ?? 'neutral'
-    const coloringStyle = state.coloringStyle ?? 'solid'
-    const tokens = coloring[color]
-    const resolved = resolveColoringStyles(tokens, coloringStyle, semantic, state)
-    const layout = componentLayouts.chip[size]
-
-    const chip: ViewStyle = {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'flex-start',
-      backgroundColor: resolved.backgroundColor,
-      borderColor: resolved.borderColor,
-      borderWidth: resolved.borderWidth,
-      paddingVertical: layout.paddingVertical,
-      paddingHorizontal: layout.paddingHorizontal,
-      gap: layout.gap,
-      minHeight: layout.minHeight,
-      borderRadius: layout.borderRadius,
-      opacity: state.isDisabled ? 0.6 : 1,
-    }
-
-    const text: TextStyle = {
-      color: resolved.color,
-      fontSize: layout.fontSize,
-      fontWeight: fontWeights.semibold,
-    }
-
-    return { chip, text }
-  }
+import {
+  createStyleResolver,
+  type ComponentThemeResolver
+} from '../types/resolver'
+
+export const toChipThemeResolvers: ComponentThemeResolver<ChipThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: ChipState) => componentTokens.chip({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      size: state.size,
+      color: state.color,
+      variant: state.variant,
+    },
+  })
 
   return {
-    chip: createStyleResolver((state) => resolveState(state).chip),
-    text: createStyleResolver((state) => resolveState(state).text),
+    chip: createStyleResolver((state: ChipState): ChipStyle => (
+      toContainerStyle(resolve(state).container)
+    )),
+    text: createStyleResolver((state: ChipState): ChipTextStyle => (
+      toTextStyle(resolve(state).text)
+    )),
   }
 }
-
-export const createChipThemeFromDesign = (theme: DesignTokensTheme): ChipTheme => {
-  return createChipTheme({
-    semantic: theme.semanticColors,
-    coloring: theme.coloring as HightideComponentThemes['coloring'],
-  })
-}

package/src/theme/resolvers/colorScheme.ts

@@ -0,0 +1,136 @@
+import { buttonVariants } from '@helpwave/hightide-design/component-token-resolvers'
+import type {
+  ButtonVariant } from '@helpwave/hightide-design/semantic-token-resolvers'
+import {
+  mapButtonVariant,
+  resolveColoringColorVariant,
+  resolveColoringStyle,
+  resolvePressableColoring
+} from '@helpwave/hightide-design/semantic-token-resolvers'
+import type {
+  ColorPairToken,
+  ThemeTokens
+} from '@helpwave/hightide-design/theme-tokens'
+
+import type { Color } from '../types/color'
+import {
+  toPressableInteractionState,
+  type InteractionState
+} from '../types/resolver'
+
+const colorSchemeKeys = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'positive',
+  'warning',
+  'negative',
+  'neutral',
+] as const
+
+export type ResolvedColoringStyles = {
+  backgroundColor: Color,
+  color: Color,
+  borderColor?: Color,
+}
+
+export type ColoringState = {
+  color: Color,
+  foreground: Color,
+  border: Color,
+}
+
+export type ColoringStateProperty = {
+  base: ColoringState,
+  emphasisOverride: ColoringState,
+}
+
+export type HightideColorScheme = Record<ButtonVariant, ColoringStateProperty>
+
+export type HightideColorSchemes = {
+  primary: HightideColorScheme,
+  secondary: HightideColorScheme,
+  tertiary: HightideColorScheme,
+  positive: HightideColorScheme,
+  warning: HightideColorScheme,
+  negative: HightideColorScheme,
+  neutral: HightideColorScheme,
+  disabled: HightideColorScheme,
+}
+
+export const resolveColoringStyles = (
+  themeTokens: ThemeTokens,
+  colorPair: ColorPairToken,
+  variant: ButtonVariant,
+  state: InteractionState = {}
+): ResolvedColoringStyles => {
+  const { colorVariant, style } = mapButtonVariant(variant)
+  const coloring = resolveColoringStyle({
+    themeTokens,
+    coloring: resolveColoringColorVariant({
+      themeTokens,
+      colorPair,
+      variant: colorVariant,
+    }),
+    style,
+  })
+  const resolved = resolvePressableColoring({
+    themeTokens,
+    coloring,
+    variant,
+    state: toPressableInteractionState(state),
+  })
+
+  return {
+    backgroundColor: resolved.background,
+    color: resolved.foreground,
+    borderColor: resolved.border !== 'transparent'
+      ? resolved.border
+      : resolved.outline !== 'transparent'
+        ? resolved.outline
+        : resolved.background,
+  }
+}
+
+const toColoringState = (
+  themeTokens: ThemeTokens,
+  colorPair: ColorPairToken,
+  variant: ButtonVariant,
+  state: InteractionState
+): ColoringState => {
+  const resolved = resolveColoringStyles(themeTokens, colorPair, variant, state)
+
+  return {
+    color: resolved.backgroundColor,
+    foreground: resolved.color,
+    border: resolved.borderColor ?? resolved.backgroundColor,
+  }
+}
+
+export const createColorSchemes = (themeTokens: ThemeTokens): HightideColorSchemes => (
+  Object.fromEntries(
+    colorSchemeKeys.map((key) => [
+      key,
+      Object.fromEntries(
+        buttonVariants.map((variant) => [
+          variant,
+          {
+            base: toColoringState(themeTokens, themeTokens.color[key], variant, {}),
+            emphasisOverride: toColoringState(
+              themeTokens,
+              themeTokens.color[key],
+              variant,
+              { isHovered: true }
+            ),
+          } satisfies ColoringStateProperty,
+        ])
+      ),
+    ])
+  ) as HightideColorSchemes
+)
+
+export const isOutlinedVariant = (
+  variant: ButtonVariant
+): boolean => {
+  return variant === 'outlined'
+}

package/src/theme/resolvers/divider.ts

@@ -0,0 +1,34 @@
+import { toContainerStyle } from '../adapters/container-adapter'
+import type {
+  DividerState,
+  DividerStyle,
+  DividerThemeResolvers
+} from '../types/components/divider'
+import {
+  createStyleResolver,
+  type ComponentThemeResolver
+} from '../types/resolver'
+
+export const toDividerThemeResolvers: ComponentThemeResolver<DividerThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: DividerState = {}) => componentTokens.divider({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      direction: state.direction,
+      color: state.color,
+      width: state.width,
+      margin: state.margin,
+    },
+  })
+
+  return {
+    container: createStyleResolver((state: DividerState): DividerStyle => ({
+      ...toContainerStyle(resolve(state)),
+      alignSelf: 'stretch',
+    })),
+  }
+}

package/src/theme/resolvers/icon.ts

@@ -0,0 +1,21 @@
+import { iconSizes } from '@helpwave/hightide-design/theme-tokens'
+
+import type { IconThemeResolvers } from '../types/components/hightide'
+import type { ComponentThemeResolver } from '../types/resolver'
+
+export const toIconThemeResolvers: ComponentThemeResolver<IconThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => (
+  Object.fromEntries(
+    iconSizes.map((size) => [
+      size,
+      componentTokens.icon({
+        themeTokens,
+        semanticResolvers: semanticTokens,
+        overrides: { size },
+      }),
+    ])
+  ) as IconThemeResolvers
+)