@helpwave/hightide-native 0.0.1

package/src/storybook/helper.tsx

@@ -0,0 +1,36 @@
+import { Plus } from 'lucide-react-native'
+
+const iconSelect = {
+  control: 'select',
+  options: ['none', 'icon'],
+  mapping: {
+    none: undefined,
+    icon: Plus,
+  },
+} as const
+
+const exampleSelectValues = [
+  'Strawberry',
+  'Apple',
+  'Banana',
+  'Blueberry',
+  'Mango',
+  'Pineapple',
+  'Grapes',
+  'Orange',
+  'Peach',
+  'Watermelon',
+  'Kiwi',
+  'Cherry',
+  'Lemon',
+  'Papaya',
+  'Raspberry',
+  'Blackberry',
+] as const
+
+export type StorybookHelperSelectType = typeof exampleSelectValues[number]
+
+export const StorybookHelper = {
+  iconSelect,
+  selectValues: exampleSelectValues,
+}

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export * from './resolvers'
+export * from './themes'
+export * from './types'

package/src/theme/resolvers/button.ts

@@ -0,0 +1,74 @@
+import {
+  componentLayouts,
+  toPx,
+  type ColoringTokensDefinitions,
+  type DesignTheme as DesignTokensTheme,
+  type ElementSize,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type { ButtonState, ButtonStyle, ButtonTextStyle, ButtonTheme } from '../types'
+import { isOutlineColoringStyle, resolveColoringStyles } from './coloring'
+
+const buttonFontSizes: Record<ElementSize, number> = {
+  xs: 12,
+  sm: 14,
+  md: 14,
+  lg: 18,
+}
+
+export type CreateButtonThemeOptions = {
+  semantic: SemanticColors,
+  coloring: ColoringTokensDefinitions,
+}
+
+export const createButtonTheme = ({
+  semantic,
+  coloring,
+}: CreateButtonThemeOptions): ButtonTheme => {
+  const resolveState = (state: ButtonState) => {
+    const size = state.size ?? 'md'
+    const color = state.color ?? 'primary'
+    const coloringStyle = state.coloringStyle ?? 'solid'
+    const tokens = coloring[color]
+    const resolved = resolveColoringStyles(tokens, coloringStyle, semantic, state)
+    const padding = componentLayouts.button[size]
+    const sizing = componentLayouts.element[size]
+    const outlinePadding = isOutlineColoringStyle(coloringStyle)
+
+    const button: ButtonStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: resolved.backgroundColor,
+      borderColor: resolved.borderColor,
+      borderWidth: resolved.borderWidth,
+      paddingVertical: toPx(outlinePadding ? padding.paddingYOutline : padding.paddingY),
+      paddingHorizontal: toPx(outlinePadding ? padding.paddingXOutline : padding.paddingX),
+      gap: toPx(padding.gap),
+      minWidth: toPx(padding.minWidth),
+      minHeight: toPx(sizing.height),
+      borderRadius: toPx(padding.borderRadius),
+      opacity: state.isDisabled ? 0.6 : 1,
+    }
+
+    const text: ButtonTextStyle = {
+      color: resolved.color,
+      fontSize: buttonFontSizes[size],
+      fontWeight: '600',
+    }
+
+    return { button, text }
+  }
+
+  return {
+    button: (state) => resolveState(state).button,
+    text: (state) => resolveState(state).text,
+  }
+}
+
+export const createButtonThemeFromDesign = (theme: DesignTokensTheme): ButtonTheme => {
+  return createButtonTheme({
+    semantic: theme.semantic,
+    coloring: theme.coloring,
+  })
+}

package/src/theme/resolvers/checkbox.ts

@@ -0,0 +1,86 @@
+import {
+  remToPx,
+  spacing,
+  type ComponentColors,
+  type DesignTheme as DesignTokensTheme,
+  type ElementSize,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type {
+  CheckboxSize,
+  CheckboxState,
+  CheckboxStyle,
+  CheckboxTheme
+} from '../types'
+
+const checkboxSizes: Record<CheckboxSize, number> = {
+  sm: remToPx('1.25rem'),
+  md: remToPx('1.5rem'),
+  lg: remToPx('2rem'),
+}
+
+const checkboxIconSizes: Record<CheckboxSize, Exclude<ElementSize, 'xs'>> = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+}
+
+export type CreateCheckboxThemeOptions = {
+  semantic: SemanticColors,
+  component: ComponentColors,
+}
+
+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 backgroundColor = state.isDisabled
+      ? semantic.disabled
+      : (isActive ? semantic.primary : component.input.background)
+
+    const checkbox: CheckboxStyle = {
+      width: dimension,
+      height: dimension,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: remToPx(spacing.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,
+      },
+    }
+  }
+
+  return {
+    checkbox: (state) => resolveState(state).checkbox,
+    icon: (state) => resolveState(state).icon,
+  }
+}
+
+export const createCheckboxThemeFromDesign = (theme: DesignTokensTheme): CheckboxTheme => {
+  return createCheckboxTheme({
+    semantic: theme.semantic,
+    component: theme.component,
+  })
+}

package/src/theme/resolvers/chip.ts

@@ -0,0 +1,64 @@
+import {
+  componentLayouts,
+  toPx,
+  type ColoringTokensDefinitions,
+  type DesignTheme as DesignTokensTheme,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type { ChipState, ChipStyle, ChipTextStyle, ChipTheme } from '../types'
+import { resolveColoringStyles } from './coloring'
+
+export type CreateChipThemeOptions = {
+  semantic: SemanticColors,
+  coloring: ColoringTokensDefinitions,
+}
+
+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: ChipStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      alignSelf: 'flex-start',
+      backgroundColor: resolved.backgroundColor,
+      borderColor: resolved.borderColor,
+      borderWidth: resolved.borderWidth,
+      paddingVertical: toPx(layout.paddingVertical),
+      paddingHorizontal: toPx(layout.paddingHorizontal),
+      gap: toPx(layout.gap),
+      minHeight: toPx(layout.minHeight),
+      borderRadius: toPx(layout.borderRadius),
+      opacity: state.isDisabled ? 0.6 : 1,
+    }
+
+    const text: ChipTextStyle = {
+      color: resolved.color,
+      fontSize: toPx(layout.fontSize),
+      fontWeight: '600',
+    }
+
+    return { chip, text }
+  }
+
+  return {
+    chip: (state) => resolveState(state).chip,
+    text: (state) => resolveState(state).text,
+  }
+}
+
+export const createChipThemeFromDesign = (theme: DesignTokensTheme): ChipTheme => {
+  return createChipTheme({
+    semantic: theme.semantic,
+    coloring: theme.coloring,
+  })
+}

package/src/theme/resolvers/coloring.ts

@@ -0,0 +1,90 @@
+import {
+  componentLayouts,
+  hexWithAlpha,
+  toPx,
+  type ButtonColoringStyle,
+  type ChipColoringStyle,
+  type ColorValue,
+  type ColoringToken,
+  type ColoringStyle,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type { InteractionState } from '../types'
+
+export type ResolvedColoringStyles = {
+  backgroundColor: ColorValue | 'transparent',
+  color: ColorValue,
+  borderColor?: ColorValue,
+  borderWidth: number,
+}
+
+const usesHover = (state: InteractionState): boolean => {
+  return !!(state.isHovered || state.isPressed) && !state.isDisabled
+}
+
+export const resolveColoringStyles = (
+  tokens: ColoringToken,
+  coloringStyle: ColoringStyle,
+  semantic: SemanticColors,
+  state: InteractionState = {}
+): ResolvedColoringStyles => {
+  const outlineWidth = toPx(componentLayouts.shared.coloringOutlineWidth)
+  const hovered = usesHover(state)
+
+  if (state.isDisabled) {
+    return {
+      backgroundColor: semantic.disabled,
+      color: semantic.onDisabled,
+      borderWidth: 0,
+    }
+  }
+
+  switch (coloringStyle) {
+  case 'solid':
+    return {
+      backgroundColor: hovered ? tokens.hover : tokens.color,
+      color: tokens.onColor,
+      borderWidth: 0,
+    }
+  case 'text':
+    return {
+      backgroundColor: 'transparent',
+      color: hovered
+        ? (tokens.textHover ?? tokens.hover)
+        : (tokens.text ?? tokens.color),
+      borderWidth: 0,
+    }
+  case 'outline':
+    return {
+      backgroundColor: 'transparent',
+      color: hovered
+        ? (tokens.outlineHover ?? tokens.hover)
+        : (tokens.outline ?? tokens.color),
+      borderColor: hovered
+        ? (tokens.outlineHover ?? tokens.hover)
+        : (tokens.outline ?? tokens.color),
+      borderWidth: outlineWidth,
+    }
+  case 'tonal':
+    return {
+      backgroundColor: hexWithAlpha(tokens.tonalBackground ?? tokens.color, hovered ? 0.28 : 0.2),
+      color: tokens.tonalText ?? tokens.color,
+      borderWidth: 0,
+    }
+  case 'tonal-outline':
+    return {
+      backgroundColor: hexWithAlpha(tokens.tonalBackground ?? tokens.color, hovered ? 0.28 : 0.2),
+      color: tokens.tonalText ?? tokens.color,
+      borderColor: hovered
+        ? (tokens.outlineHover ?? tokens.hover)
+        : (tokens.outline ?? tokens.color),
+      borderWidth: outlineWidth,
+    }
+  }
+}
+
+export const isOutlineColoringStyle = (
+  coloringStyle: ButtonColoringStyle | ChipColoringStyle
+): boolean => {
+  return coloringStyle === 'outline' || coloringStyle === 'tonal-outline'
+}

package/src/theme/resolvers/iconButton.ts

@@ -0,0 +1,62 @@
+import {
+  componentLayouts,
+  toPx,
+  type ColoringTokensDefinitions,
+  type DesignTheme as DesignTokensTheme,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type { IconButtonState, IconButtonStyle, IconButtonTheme } from '../types'
+import { isOutlineColoringStyle, resolveColoringStyles } from './coloring'
+
+export type CreateIconButtonThemeOptions = {
+  semantic: SemanticColors,
+  coloring: ColoringTokensDefinitions,
+}
+
+export const createIconButtonTheme = ({
+  semantic,
+  coloring,
+}: CreateIconButtonThemeOptions): IconButtonTheme => {
+  const resolveState = (state: IconButtonState) => {
+    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 sizing = componentLayouts.element[size]
+    const outlineWidth = toPx(componentLayouts.shared.coloringOutlineWidth)
+    const dimension = toPx(sizing.height)
+    const borderWidth = resolved.borderWidth > 0
+      ? resolved.borderWidth
+      : (isOutlineColoringStyle(coloringStyle) ? outlineWidth : 0)
+
+    const button: IconButtonStyle = {
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: resolved.backgroundColor,
+      borderColor: resolved.borderColor,
+      borderWidth,
+      width: dimension,
+      height: dimension,
+      borderRadius: toPx(componentLayouts.button[size].borderRadius),
+      opacity: state.isDisabled ? 0.6 : 1,
+    }
+
+    return {
+      button,
+      icon: { color: resolved.color },
+    }
+  }
+
+  return {
+    button: (state) => resolveState(state).button,
+    icon: (state) => resolveState(state).icon,
+  }
+}
+
+export const createIconButtonThemeFromDesign = (theme: DesignTokensTheme): IconButtonTheme => {
+  return createIconButtonTheme({
+    semantic: theme.semantic,
+    coloring: theme.coloring,
+  })
+}

package/src/theme/resolvers/index.ts

@@ -0,0 +1,8 @@
+export * from './button'
+export * from './checkbox'
+export * from './chip'
+export * from './coloring'
+export * from './iconButton'
+export * from './input'
+export * from './multiSelect'
+export * from './select'

package/src/theme/resolvers/input.ts

@@ -0,0 +1,48 @@
+import {
+  inputElementSizes,
+  remToPx,
+  type ComponentColors,
+  type DesignTheme as DesignTokensTheme,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type { InputState, InputStyle, InputTheme } from '../types'
+
+export type CreateInputThemeOptions = {
+  semantic: SemanticColors,
+  component: ComponentColors,
+}
+
+export const createInputTheme = ({
+  semantic,
+  component,
+}: CreateInputThemeOptions): InputTheme => {
+  const resolveInput = (state: InputState): InputStyle => {
+    const sizing = inputElementSizes.md
+    const borderColor = state.isInvalid ? semantic.negative : component.border
+
+    return {
+      minHeight: remToPx(sizing.height),
+      paddingHorizontal: remToPx(sizing.paddingX),
+      paddingVertical: remToPx(sizing.paddingY),
+      borderRadius: remToPx(sizing.borderRadius),
+      borderWidth: 1,
+      borderColor,
+      backgroundColor: state.isDisabled ? semantic.disabled : component.input.background,
+      color: state.isDisabled ? semantic.onDisabled : component.input.text,
+      fontSize: 14,
+      opacity: state.isDisabled ? 0.6 : 1,
+    }
+  }
+
+  return {
+    input: resolveInput,
+    placeholderColor: () => semantic.placeholder,
+  }
+}
+
+export const createInputThemeFromDesign = (theme: DesignTokensTheme): InputTheme => {
+  return createInputTheme({
+    semantic: theme.semantic,
+    component: theme.component,
+  })
+}

package/src/theme/resolvers/multiSelect.ts

@@ -0,0 +1,95 @@
+import {
+  remToPx,
+  type ComponentColors,
+  type DesignTheme as DesignTokensTheme,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type {
+  MultiSelectOptionState,
+  MultiSelectState,
+  MultiSelectTheme
+} from '../types'
+
+export type CreateMultiSelectThemeOptions = {
+  semantic: SemanticColors,
+  component: ComponentColors,
+}
+
+export const createMultiSelectTheme = ({
+  semantic,
+  component,
+}: CreateMultiSelectThemeOptions): MultiSelectTheme => {
+  return {
+    trigger: (state: MultiSelectState) => ({
+      minHeight: 44,
+      paddingHorizontal: remToPx('0.75rem'),
+      paddingVertical: remToPx('0.5rem'),
+      borderRadius: remToPx('0.375rem'),
+      borderWidth: 1,
+      borderColor: state.isInvalid ? semantic.negative : component.border,
+      backgroundColor: state.isDisabled ? semantic.disabled : component.input.background,
+      justifyContent: 'center',
+      gap: 8,
+      opacity: state.isDisabled ? 0.6 : 1,
+    }),
+    triggerText: () => ({
+      color: semantic.placeholder,
+    }),
+    overlay: () => ({
+      flex: 1,
+      backgroundColor: '#00000059',
+      justifyContent: 'center',
+      padding: 24,
+    }),
+    menu: () => ({
+      maxHeight: 360,
+      borderRadius: 12,
+      backgroundColor: component.menu.background,
+      borderWidth: 1,
+      borderColor: component.menu.border,
+      overflow: 'hidden',
+    }),
+    search: () => ({
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: component.menu.border,
+      color: component.menu.text,
+    }),
+    searchPlaceholderColor: () => semantic.placeholder,
+    option: (state: MultiSelectOptionState) => ({
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor: state.isHighlighted ? component.table.rowHoverBackground : 'transparent',
+      opacity: state.isDisabled ? 0.5 : 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 10,
+    }),
+    optionText: (state: MultiSelectOptionState) => ({
+      color: state.isSelected ? semantic.primary : component.menu.text,
+      fontWeight: state.isSelected ? '600' : '400',
+    }),
+    checkbox: (state: MultiSelectOptionState) => ({
+      width: 18,
+      height: 18,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: state.isSelected ? semantic.primary : component.border,
+      backgroundColor: state.isSelected ? semantic.primary : 'transparent',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }),
+    checkboxIcon: (state: MultiSelectOptionState) => ({
+      color: semantic.onPrimary,
+      visible: !!state.isSelected,
+    }),
+  }
+}
+
+export const createMultiSelectThemeFromDesign = (theme: DesignTokensTheme): MultiSelectTheme => {
+  return createMultiSelectTheme({
+    semantic: theme.semantic,
+    component: theme.component,
+  })
+}

package/src/theme/resolvers/select.ts

@@ -0,0 +1,77 @@
+import {
+  remToPx,
+  type ComponentColors,
+  type DesignTheme as DesignTokensTheme,
+  type SemanticColors
+} from '@helpwave/hightide-design'
+import type {
+  SelectOptionState,
+  SelectState,
+  SelectTheme
+} from '../types'
+
+export type CreateSelectThemeOptions = {
+  semantic: SemanticColors,
+  component: ComponentColors,
+}
+
+export const createSelectTheme = ({
+  semantic,
+  component,
+}: CreateSelectThemeOptions): SelectTheme => {
+  return {
+    trigger: (state: SelectState) => ({
+      minHeight: 44,
+      paddingHorizontal: remToPx('0.75rem'),
+      paddingVertical: remToPx('0.5rem'),
+      borderRadius: remToPx('0.375rem'),
+      borderWidth: 1,
+      borderColor: state.isInvalid ? semantic.negative : component.border,
+      backgroundColor: state.isDisabled ? semantic.disabled : component.input.background,
+      justifyContent: 'center',
+      opacity: state.isDisabled ? 0.6 : 1,
+    }),
+    triggerText: (state: SelectState) => ({
+      color: state.hasValue ? component.input.text : semantic.placeholder,
+    }),
+    overlay: () => ({
+      flex: 1,
+      backgroundColor: '#00000059',
+      justifyContent: 'center',
+      padding: 24,
+    }),
+    menu: () => ({
+      maxHeight: 360,
+      borderRadius: 12,
+      backgroundColor: component.menu.background,
+      borderWidth: 1,
+      borderColor: component.menu.border,
+      overflow: 'hidden',
+    }),
+    search: () => ({
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: component.menu.border,
+      color: component.menu.text,
+    }),
+    searchPlaceholderColor: () => semantic.placeholder,
+    option: (state: SelectOptionState) => ({
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor: state.isHighlighted ? component.table.rowHoverBackground : 'transparent',
+      opacity: state.isDisabled ? 0.5 : 1,
+    }),
+    optionText: (state: SelectOptionState) => ({
+      color: state.isSelected ? semantic.primary : component.menu.text,
+      fontWeight: state.isSelected ? '600' : '400',
+    }),
+  }
+}
+
+export const createSelectThemeFromDesign = (theme: DesignTokensTheme): SelectTheme => {
+  return createSelectTheme({
+    semantic: theme.semantic,
+    component: theme.component,
+  })
+}

package/src/theme/themes/createTheme.ts

@@ -0,0 +1,26 @@
+import type { DesignTheme as DesignTokensTheme } from '@helpwave/hightide-design'
+import {
+  createButtonThemeFromDesign,
+  createCheckboxThemeFromDesign,
+  createChipThemeFromDesign,
+  createIconButtonThemeFromDesign,
+  createInputThemeFromDesign,
+  createMultiSelectThemeFromDesign,
+  createSelectThemeFromDesign
+} from '../resolvers'
+import type { DesignTheme } from '../types'
+
+export const createDesignTheme = (tokens: DesignTokensTheme): DesignTheme => ({
+  palettes: tokens.palettes,
+  semantic: tokens.semantic,
+  coloring: tokens.coloring,
+  components: {
+    button: createButtonThemeFromDesign(tokens),
+    iconButton: createIconButtonThemeFromDesign(tokens),
+    chip: createChipThemeFromDesign(tokens),
+    checkbox: createCheckboxThemeFromDesign(tokens),
+    input: createInputThemeFromDesign(tokens),
+    select: createSelectThemeFromDesign(tokens),
+    multiSelect: createMultiSelectThemeFromDesign(tokens),
+  },
+})

package/src/theme/themes/index.ts

@@ -0,0 +1,2 @@
+export * from './createTheme'
+export * from './nativeThemes'

package/src/theme/themes/nativeThemes.ts

@@ -0,0 +1,15 @@
+import { themes as designThemes } from '@helpwave/hightide-design'
+import { createDesignTheme } from './createTheme'
+
+export const lightTheme = createDesignTheme(designThemes.light)
+
+export const darkTheme = createDesignTheme(designThemes.dark)
+
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+} as const
+
+export type ThemeMode = keyof typeof themes
+
+export const getTheme = (mode: ThemeMode) => themes[mode]