@helpwave/hightide-native 0.0.1 → 0.0.5

package/src/theme/types/resolver.ts

@@ -7,4 +7,46 @@ export type InteractionState = {
   isInvalid?: boolean,
 }
 
-export type ResolverFunction<TState, TStyle> = (props: TState) => TStyle
+export type StyleOverwrite<TState, TStyle> =
+  TStyle | ((prev: TStyle, state: TState) => TStyle)
+
+export type StyleResolverFunction<TState, TStyle> = (
+  props: TState,
+  overwrite?: StyleOverwrite<TState, TStyle>,
+) => TStyle
+
+export const createStyleResolver = <TState, TStyle>(
+  resolve: (props: TState) => TStyle
+): StyleResolverFunction<TState, TStyle> => {
+  return (props, overwrite) => {
+    const base = resolve(props)
+
+    if (overwrite === undefined) {
+      return base
+    }
+
+    if (typeof overwrite === 'function') {
+      return (overwrite as (prev: TStyle, state: TState) => TStyle)(base, props)
+    }
+
+    return [base, overwrite] as TStyle
+  }
+}
+
+export const createValueResolver = <TState, TValue>(
+  resolve: (props: TState) => TValue
+): StyleResolverFunction<TState, TValue> => {
+  return (props, overwrite) => {
+    const base = resolve(props)
+
+    if (overwrite === undefined) {
+      return base
+    }
+
+    if (typeof overwrite === 'function') {
+      return (overwrite as (prev: TValue, state: TState) => TValue)(base, props)
+    }
+
+    return overwrite
+  }
+}

package/src/theme/types/theme.ts

@@ -1,13 +1,17 @@
 import type {
-  ColoringTokensDefinitions,
-  DesignColorPalettes,
-  SemanticColors
-} from '@helpwave/hightide-design'
-import type { ComponentThemes } from './components'
+  HightideColors,
+  HightideSemanticColors
+} from '@/src/theme/types/color'
+import type { HightideComponentThemes } from '@/src/theme/types/components/hightide'
+import type { HightideDecoration } from '@/src/theme/types/decoration'
+import type { HightideLayout } from '@/src/theme/types/layout'
+import type { HightideTypography } from '@/src/theme/types/typography'
 
-export type DesignTheme = {
-  palettes: DesignColorPalettes,
-  semantic: SemanticColors,
-  coloring: ColoringTokensDefinitions,
-  components: ComponentThemes,
+export type Theme = {
+  colors: Record<string, unknown> & HightideColors,
+  semantic: Record<string, unknown> & HightideSemanticColors,
+  components: Record<string, unknown>  & HightideComponentThemes,
+  typography: Record<string, unknown> & HightideTypography,
+  layout: Record<string, unknown> & HightideLayout,
+  decoration: Record<string, unknown> & HightideDecoration,
 }

package/src/theme/types/typography.ts

@@ -0,0 +1,18 @@
+export type TextStyle = {
+  fontSize: number,
+  lineHeight: number,
+  fontWeight: string,
+  fontFamily?: string,
+}
+
+export type HightideTypography = {
+  fontWeights: Record<string, string>,
+  scales: {
+    headline: { large: TextStyle, medium: TextStyle, small: TextStyle },
+    title: { large: TextStyle, medium: TextStyle, small: TextStyle },
+    body: { large: TextStyle, medium: TextStyle },
+    label: { large: TextStyle, medium: TextStyle },
+    caption: { large: TextStyle, medium: TextStyle, small: TextStyle },
+    button: { large: TextStyle, medium: TextStyle, small: TextStyle },
+  },
+}

package/src/components/Button/Button.tsx

@@ -1,101 +0,0 @@
-import {
-  coloringColors,
-  type ButtonColoringStyle,
-  type ColoringType,
-  type ElementSize
-} from '@helpwave/hightide-design'
-import { forwardRef, type ReactNode } from 'react'
-import {
-  Pressable,
-  Text,
-  type PressableProps,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle
-} from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
-import type { ButtonState, ButtonStyle, ButtonTextStyle } from '../../theme'
-
-export type ButtonSize = ElementSize
-
-export type ButtonColor = ColoringType
-
-export const ButtonUtil = {
-  colors: coloringColors,
-  sizes: ['xs', 'sm', 'md', 'lg'] as const satisfies readonly ElementSize[],
-  coloringStyles: ['outline', 'solid', 'text', 'tonal', 'tonal-outline'] as const satisfies readonly ButtonColoringStyle[],
-}
-
-export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
-  size?: ButtonSize,
-  color?: ButtonColor,
-  coloringStyle?: ButtonColoringStyle,
-  children?: ReactNode,
-  style?: StyleProp<ViewStyle>,
-  buttonStyle?: StyleProp<ViewStyle> | ((style: ButtonStyle) => StyleProp<ViewStyle>),
-  textStyle?: StyleProp<TextStyle> | ((style: ButtonTextStyle) => StyleProp<TextStyle>),
-}
-
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-}
-
-export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonProps>(function Button({
-  children,
-  size = 'md',
-  color = 'primary',
-  coloringStyle = 'solid',
-  disabled,
-  style,
-  buttonStyle,
-  textStyle,
-  ...props
-}, ref) {
-  const { theme } = useTheme()
-
-  const resolveStyles = (interaction: PressableInteraction) => {
-    const state: ButtonState = {
-      size,
-      color,
-      coloringStyle,
-      isDisabled: !!disabled,
-      isPressed: interaction.pressed,
-      isHovered: !!interaction.hovered,
-      isFocused: !!interaction.focused,
-    }
-
-    const resolvedButton = theme.components.button.button(state)
-    const resolvedText = theme.components.button.text(state)
-
-    return {
-      button: typeof buttonStyle === 'function' ? buttonStyle(resolvedButton) : [resolvedButton, buttonStyle],
-      text: typeof textStyle === 'function' ? textStyle(resolvedText) : [resolvedText, textStyle],
-    }
-  }
-
-  return (
-    <Pressable
-      {...props}
-      ref={ref}
-      disabled={disabled}
-      style={(pressableState) => {
-        const interaction = pressableState as PressableInteraction
-        const resolved = resolveStyles(interaction)
-
-        return [resolved.button, style]
-      }}
-    >
-      {(pressableState) => {
-        const resolved = resolveStyles(pressableState as PressableInteraction)
-
-        if (typeof children === 'string' || typeof children === 'number') {
-          return <Text style={resolved.text}>{children}</Text>
-        }
-
-        return children
-      }}
-    </Pressable>
-  )
-})

package/src/components/Button/index.ts

@@ -1 +0,0 @@
-export * from './Button'

package/src/components/Checkbox/index.ts

@@ -1 +0,0 @@
-export * from './Checkbox'

package/src/components/IconButton/IconButton.tsx

@@ -1,89 +0,0 @@
-import {
-  type ButtonColoringStyle,
-  type ColoringType,
-  type ElementSize
-} from '@helpwave/hightide-design'
-import type { LucideIcon } from 'lucide-react-native'
-import { forwardRef, type ReactNode } from 'react'
-import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from 'react-native'
-import { Icon } from '../../icons/Icon'
-import { useTheme } from '../../global-contexts/theme'
-import type { IconButtonState, IconButtonStyle } from '../../theme'
-
-export type IconButtonSize = ElementSize
-
-export type IconButtonProps = Omit<PressableProps, 'children' | 'style'> & {
-  size?: IconButtonSize,
-  color?: ColoringType,
-  coloringStyle?: ButtonColoringStyle,
-  icon?: LucideIcon,
-  iconSize?: ElementSize,
-  children?: ReactNode,
-  accessibilityLabel: string,
-  style?: StyleProp<ViewStyle>,
-  buttonStyle?: StyleProp<ViewStyle> | ((style: IconButtonStyle) => StyleProp<ViewStyle>),
-}
-
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-}
-
-export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconButtonProps>(function IconButton({
-  children,
-  icon,
-  iconSize,
-  size = 'md',
-  color = 'neutral',
-  coloringStyle = 'solid',
-  disabled,
-  accessibilityLabel,
-  style,
-  buttonStyle,
-  ...props
-}, ref) {
-  const { theme } = useTheme()
-
-  const resolveStyles = (interaction: PressableInteraction) => {
-    const state: IconButtonState = {
-      size,
-      color,
-      coloringStyle,
-      isDisabled: !!disabled,
-      isPressed: interaction.pressed,
-      isHovered: !!interaction.hovered,
-      isFocused: !!interaction.focused,
-    }
-
-    const resolvedButton = theme.components.iconButton.button(state)
-    const resolvedIcon = theme.components.iconButton.icon(state)
-
-    return {
-      button: typeof buttonStyle === 'function' ? buttonStyle(resolvedButton) : [resolvedButton, buttonStyle],
-      icon: resolvedIcon,
-    }
-  }
-
-  return (
-    <Pressable
-      {...props}
-      ref={ref}
-      disabled={disabled}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      style={(pressableState) => {
-        const resolved = resolveStyles(pressableState as PressableInteraction)
-        return [resolved.button, style]
-      }}
-    >
-      {(pressableState) => {
-        const resolved = resolveStyles(pressableState as PressableInteraction)
-        if (icon) {
-          return <Icon icon={icon} size={iconSize ?? size} color={resolved.icon.color} />
-        }
-        return children
-      }}
-    </Pressable>
-  )
-})

package/src/components/IconButton/index.ts

@@ -1 +0,0 @@
-export * from './IconButton'

package/src/components/Input/index.ts

@@ -1 +0,0 @@
-export * from './Input'

package/src/components/MultiSelect/index.ts

@@ -1 +0,0 @@
-export * from './MultiSelect'

package/src/components/Select/index.ts

@@ -1 +0,0 @@
-export * from './Select'

package/src/icons/Icon.tsx

@@ -1,35 +0,0 @@
-import { getIconSizePx, getIconStrokeWidth, type ElementSize } from '@helpwave/hightide-design'
-import type { LucideIcon } from 'lucide-react-native'
-
-export type IconProps = {
-  icon: LucideIcon,
-  size?: ElementSize,
-  color?: string,
-}
-
-export const Icon = ({
-  icon: IconComponent,
-  size = 'md',
-  color,
-}: IconProps) => {
-  return (
-    <IconComponent
-      size={getIconSizePx(size)}
-      strokeWidth={getIconStrokeWidth(size)}
-      color={color}
-    />
-  )
-}
-
-export const resolveIconProps = (
-  size: ElementSize = 'md',
-  color?: string
-): {
-  size: number,
-  strokeWidth: number,
-  color?: string,
-} => ({
-  size: getIconSizePx(size),
-  strokeWidth: getIconStrokeWidth(size),
-  color,
-})

package/src/icons/index.ts

@@ -1 +0,0 @@
-export * from './Icon'

package/src/theme/types/button.ts

@@ -1,41 +0,0 @@
-import type {
-  ButtonColoringStyle,
-  ColorValue,
-  ColoringType,
-  ElementSize,
-  FontWeight
-} from '@helpwave/hightide-design'
-import type { InteractionState, ResolverFunction } from './resolver'
-
-export type ButtonState = InteractionState & {
-  size?: ElementSize,
-  color?: ColoringType,
-  coloringStyle?: ButtonColoringStyle,
-}
-
-export type ButtonStyle = {
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: ColorValue | 'transparent',
-  borderColor?: ColorValue,
-  borderWidth: number,
-  paddingVertical: number,
-  paddingHorizontal: number,
-  gap: number,
-  minWidth: number,
-  minHeight: number,
-  borderRadius: number,
-  opacity: number,
-}
-
-export type ButtonTextStyle = {
-  color: ColorValue,
-  fontSize: number,
-  fontWeight: FontWeight,
-}
-
-export type ButtonTheme = {
-  button: ResolverFunction<ButtonState, ButtonStyle>,
-  text: ResolverFunction<ButtonState, ButtonTextStyle>,
-}

package/src/theme/types/checkbox.ts

@@ -1,36 +0,0 @@
-import type { ColorValue, ElementSize } from '@helpwave/hightide-design'
-import type { InteractionState, ResolverFunction } from './resolver'
-
-export type CheckboxSize = 'sm' | 'md' | 'lg'
-
-export type CheckboxState = InteractionState & {
-  size?: CheckboxSize,
-  isChecked?: boolean,
-  isIndeterminate?: boolean,
-  isInvalid?: boolean,
-  isRounded?: boolean,
-  alwaysShowCheckIcon?: boolean,
-}
-
-export type CheckboxStyle = {
-  width: number,
-  height: number,
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderWidth: number,
-  borderColor: ColorValue,
-  borderRadius: number,
-  backgroundColor: ColorValue,
-  opacity: number,
-}
-
-export type CheckboxIconStyle = {
-  color: ColorValue,
-  size: Exclude<ElementSize, 'xs'>,
-  visible: boolean,
-}
-
-export type CheckboxTheme = {
-  checkbox: ResolverFunction<CheckboxState, CheckboxStyle>,
-  icon: ResolverFunction<CheckboxState, CheckboxIconStyle>,
-}

package/src/theme/types/chip.ts

@@ -1,41 +0,0 @@
-import type {
-  ChipColoringStyle,
-  ColorValue,
-  ColoringType,
-  ElementSize,
-  FontWeight
-} from '@helpwave/hightide-design'
-import type { InteractionState, ResolverFunction } from './resolver'
-
-export type ChipState = InteractionState & {
-  size?: ElementSize,
-  color?: ColoringType,
-  coloringStyle?: ChipColoringStyle,
-}
-
-export type ChipStyle = {
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'center',
-  alignSelf: 'flex-start',
-  backgroundColor: ColorValue | 'transparent',
-  borderColor?: ColorValue,
-  borderWidth: number,
-  paddingVertical: number,
-  paddingHorizontal: number,
-  gap: number,
-  minHeight: number,
-  borderRadius: number,
-  opacity: number,
-}
-
-export type ChipTextStyle = {
-  color: ColorValue,
-  fontSize: number,
-  fontWeight: FontWeight,
-}
-
-export type ChipTheme = {
-  chip: ResolverFunction<ChipState, ChipStyle>,
-  text: ResolverFunction<ChipState, ChipTextStyle>,
-}

package/src/theme/types/components.ts

@@ -1,17 +0,0 @@
-import type { ButtonTheme } from './button'
-import type { CheckboxTheme } from './checkbox'
-import type { ChipTheme } from './chip'
-import type { IconButtonTheme } from './iconButton'
-import type { InputTheme } from './input'
-import type { MultiSelectTheme } from './multiSelect'
-import type { SelectTheme } from './select'
-
-export type ComponentThemes = {
-  button: ButtonTheme,
-  iconButton: IconButtonTheme,
-  chip: ChipTheme,
-  checkbox: CheckboxTheme,
-  input: InputTheme,
-  select: SelectTheme,
-  multiSelect: MultiSelectTheme,
-}

package/src/theme/types/iconButton.ts

@@ -1,34 +0,0 @@
-import type {
-  ButtonColoringStyle,
-  ColorValue,
-  ColoringType,
-  ElementSize
-} from '@helpwave/hightide-design'
-import type { InteractionState, ResolverFunction } from './resolver'
-
-export type IconButtonState = InteractionState & {
-  size?: ElementSize,
-  color?: ColoringType,
-  coloringStyle?: ButtonColoringStyle,
-}
-
-export type IconButtonStyle = {
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: ColorValue | 'transparent',
-  borderColor?: ColorValue,
-  borderWidth: number,
-  width: number,
-  height: number,
-  borderRadius: number,
-  opacity: number,
-}
-
-export type IconButtonIconStyle = {
-  color: ColorValue,
-}
-
-export type IconButtonTheme = {
-  button: ResolverFunction<IconButtonState, IconButtonStyle>,
-  icon: ResolverFunction<IconButtonState, IconButtonIconStyle>,
-}

package/src/theme/types/input.ts

@@ -1,25 +0,0 @@
-import type { ColorValue } from '@helpwave/hightide-design'
-import type { InteractionState, ResolverFunction } from './resolver'
-
-export type InputState = InteractionState & {
-  isInvalid?: boolean,
-  isReadOnly?: boolean,
-}
-
-export type InputStyle = {
-  minHeight: number,
-  paddingHorizontal: number,
-  paddingVertical: number,
-  borderRadius: number,
-  borderWidth: number,
-  borderColor: ColorValue,
-  backgroundColor: ColorValue,
-  color: ColorValue,
-  fontSize: number,
-  opacity: number,
-}
-
-export type InputTheme = {
-  input: ResolverFunction<InputState, InputStyle>,
-  placeholderColor: ResolverFunction<InputState, ColorValue>,
-}

package/src/theme/types/multiSelect.ts

@@ -1,65 +0,0 @@
-import type { ColorValue, FontWeight } from '@helpwave/hightide-design'
-import type { ResolverFunction } from './resolver'
-import type {
-  SelectMenuStyle,
-  SelectOptionState,
-  SelectOverlayStyle,
-  SelectSearchStyle,
-  SelectState,
-  SelectTriggerStyle,
-  SelectTriggerTextStyle
-} from './select'
-
-export type MultiSelectState = SelectState & {
-  hasSelections?: boolean,
-}
-
-export type MultiSelectOptionState = SelectOptionState
-
-export type MultiSelectTriggerStyle = SelectTriggerStyle & {
-  gap: number,
-}
-
-export type MultiSelectOptionStyle = {
-  paddingHorizontal: number,
-  paddingVertical: number,
-  backgroundColor: ColorValue | 'transparent',
-  opacity: number,
-  flexDirection: 'row',
-  alignItems: 'center',
-  gap: number,
-}
-
-export type MultiSelectOptionTextStyle = {
-  color: ColorValue,
-  fontWeight: FontWeight,
-}
-
-export type MultiSelectCheckboxStyle = {
-  width: number,
-  height: number,
-  borderRadius: number,
-  borderWidth: number,
-  borderColor: ColorValue,
-  backgroundColor: ColorValue | 'transparent',
-  alignItems: 'center',
-  justifyContent: 'center',
-}
-
-export type MultiSelectCheckboxIconStyle = {
-  color: ColorValue,
-  visible: boolean,
-}
-
-export type MultiSelectTheme = {
-  trigger: ResolverFunction<MultiSelectState, MultiSelectTriggerStyle>,
-  triggerText: ResolverFunction<MultiSelectState, SelectTriggerTextStyle>,
-  overlay: ResolverFunction<MultiSelectState, SelectOverlayStyle>,
-  menu: ResolverFunction<MultiSelectState, SelectMenuStyle>,
-  search: ResolverFunction<MultiSelectState, SelectSearchStyle>,
-  searchPlaceholderColor: ResolverFunction<MultiSelectState, ColorValue>,
-  option: ResolverFunction<MultiSelectOptionState, MultiSelectOptionStyle>,
-  optionText: ResolverFunction<MultiSelectOptionState, MultiSelectOptionTextStyle>,
-  checkbox: ResolverFunction<MultiSelectOptionState, MultiSelectCheckboxStyle>,
-  checkboxIcon: ResolverFunction<MultiSelectOptionState, MultiSelectCheckboxIconStyle>,
-}

package/src/theme/types/select.ts

@@ -1,77 +0,0 @@
-import type { ColorValue, FontWeight } from '@helpwave/hightide-design'
-import type { InteractionState, ResolverFunction } from './resolver'
-
-export type SelectState = InteractionState & {
-  isInvalid?: boolean,
-  isReadOnly?: boolean,
-  isOpen?: boolean,
-  hasValue?: boolean,
-}
-
-export type SelectOptionState = InteractionState & {
-  isSelected?: boolean,
-  isHighlighted?: boolean,
-}
-
-export type SelectTriggerStyle = {
-  minHeight: number,
-  paddingHorizontal: number,
-  paddingVertical: number,
-  borderRadius: number,
-  borderWidth: number,
-  borderColor: ColorValue,
-  backgroundColor: ColorValue,
-  justifyContent: 'center',
-  opacity: number,
-}
-
-export type SelectTriggerTextStyle = {
-  color: ColorValue,
-}
-
-export type SelectOverlayStyle = {
-  flex: 1,
-  backgroundColor: ColorValue,
-  justifyContent: 'center',
-  padding: number,
-}
-
-export type SelectMenuStyle = {
-  maxHeight: number,
-  borderRadius: number,
-  backgroundColor: ColorValue,
-  borderWidth: number,
-  borderColor: ColorValue,
-  overflow: 'hidden',
-}
-
-export type SelectSearchStyle = {
-  paddingHorizontal: number,
-  paddingVertical: number,
-  borderBottomWidth: number,
-  borderBottomColor: ColorValue,
-  color: ColorValue,
-}
-
-export type SelectOptionStyle = {
-  paddingHorizontal: number,
-  paddingVertical: number,
-  backgroundColor: ColorValue | 'transparent',
-  opacity: number,
-}
-
-export type SelectOptionTextStyle = {
-  color: ColorValue,
-  fontWeight: FontWeight,
-}
-
-export type SelectTheme = {
-  trigger: ResolverFunction<SelectState, SelectTriggerStyle>,
-  triggerText: ResolverFunction<SelectState, SelectTriggerTextStyle>,
-  overlay: ResolverFunction<SelectState, SelectOverlayStyle>,
-  menu: ResolverFunction<SelectState, SelectMenuStyle>,
-  search: ResolverFunction<SelectState, SelectSearchStyle>,
-  searchPlaceholderColor: ResolverFunction<SelectState, ColorValue>,
-  option: ResolverFunction<SelectOptionState, SelectOptionStyle>,
-  optionText: ResolverFunction<SelectOptionState, SelectOptionTextStyle>,
-}