@helpwave/hightide-native 0.0.1

package/src/theme/types/button.ts

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,34 @@
+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/index.ts

@@ -0,0 +1,10 @@
+export * from './button'
+export * from './checkbox'
+export * from './chip'
+export * from './components'
+export * from './iconButton'
+export * from './input'
+export * from './multiSelect'
+export * from './resolver'
+export * from './select'
+export * from './theme'

package/src/theme/types/input.ts

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,65 @@
+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/resolver.ts

@@ -0,0 +1,10 @@
+export type InteractionState = {
+  isDisabled?: boolean,
+  isHovered?: boolean,
+  isFocused?: boolean,
+  isPressed?: boolean,
+  isReadOnly?: boolean,
+  isInvalid?: boolean,
+}
+
+export type ResolverFunction<TState, TStyle> = (props: TState) => TStyle

package/src/theme/types/select.ts

@@ -0,0 +1,77 @@
+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>,
+}

package/src/theme/types/theme.ts

@@ -0,0 +1,13 @@
+import type {
+  ColoringTokensDefinitions,
+  DesignColorPalettes,
+  SemanticColors
+} from '@helpwave/hightide-design'
+import type { ComponentThemes } from './components'
+
+export type DesignTheme = {
+  palettes: DesignColorPalettes,
+  semantic: SemanticColors,
+  coloring: ColoringTokensDefinitions,
+  components: ComponentThemes,
+}

package/src/types/formField.ts

@@ -0,0 +1,12 @@
+export type FormFieldInteractionStates = {
+  invalid: boolean,
+  disabled: boolean,
+  readOnly: boolean,
+  required: boolean,
+}
+
+export type FormFieldDataHandling<T> = {
+  value: T,
+  onValueChange: (value: T) => void,
+  onEditComplete: (value: T) => void,
+}

package/src/types/index.ts

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