@onlynative/components 0.1.0-alpha.0

package/src/button/Button.tsx

@@ -0,0 +1,130 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import { useMemo } from 'react'
+import { Platform, Pressable } from 'react-native'
+import { StyleSheet } from 'react-native'
+import { Text } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { createStyles } from './styles'
+import type { ButtonProps } from './types'
+
+interface PressableState {
+  pressed: boolean
+  hovered?: boolean
+}
+
+function resolveStyle(
+  containerStyle: StyleProp<ViewStyle>,
+  hoveredContainerStyle: StyleProp<ViewStyle>,
+  pressedContainerStyle: StyleProp<ViewStyle>,
+  disabledContainerStyle: StyleProp<ViewStyle>,
+  disabled: boolean,
+  style: ButtonProps['style'],
+): (state: PressableState) => StyleProp<ViewStyle> {
+  if (typeof style === 'function') {
+    return (state) => [
+      containerStyle,
+      state.hovered && !state.pressed && !disabled
+        ? hoveredContainerStyle
+        : undefined,
+      state.pressed && !disabled ? pressedContainerStyle : undefined,
+      disabled ? disabledContainerStyle : undefined,
+      style(state),
+    ]
+  }
+
+  return (state) => [
+    containerStyle,
+    state.hovered && !state.pressed && !disabled
+      ? hoveredContainerStyle
+      : undefined,
+    state.pressed && !disabled ? pressedContainerStyle : undefined,
+    disabled ? disabledContainerStyle : undefined,
+    style,
+  ]
+}
+
+export function Button({
+  children,
+  style,
+  variant = 'filled',
+  leadingIcon,
+  trailingIcon,
+  iconSize = 18,
+  containerColor,
+  contentColor,
+  labelStyle: labelStyleOverride,
+  disabled = false,
+  ...props
+}: ButtonProps) {
+  const isDisabled = Boolean(disabled)
+  const hasLeading = Boolean(leadingIcon)
+  const hasTrailing = Boolean(trailingIcon)
+  const theme = useTheme()
+  const styles = useMemo(
+    () =>
+      createStyles(
+        theme,
+        variant,
+        hasLeading,
+        hasTrailing,
+        containerColor,
+        contentColor,
+      ),
+    [theme, variant, hasLeading, hasTrailing, containerColor, contentColor],
+  )
+
+  const resolvedIconColor = useMemo(() => {
+    const base = StyleSheet.flatten([
+      styles.label,
+      isDisabled ? styles.disabledLabel : undefined,
+    ])
+    return typeof base?.color === 'string' ? base.color : undefined
+  }, [styles.label, styles.disabledLabel, isDisabled])
+
+  const computedLabelStyle = useMemo(
+    () => [
+      styles.label,
+      isDisabled ? styles.disabledLabel : undefined,
+      labelStyleOverride,
+    ],
+    [isDisabled, styles.disabledLabel, styles.label, labelStyleOverride],
+  )
+
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled }}
+      hitSlop={Platform.OS === 'web' ? undefined : 4}
+      disabled={isDisabled}
+      style={resolveStyle(
+        styles.container,
+        styles.hoveredContainer,
+        styles.pressedContainer,
+        styles.disabledContainer,
+        isDisabled,
+        style,
+      )}
+    >
+      {leadingIcon ? (
+        <MaterialCommunityIcons
+          name={leadingIcon}
+          size={iconSize}
+          color={resolvedIconColor}
+          style={styles.leadingIcon}
+        />
+      ) : null}
+      <Text style={computedLabelStyle}>{children}</Text>
+      {trailingIcon ? (
+        <MaterialCommunityIcons
+          name={trailingIcon}
+          size={iconSize}
+          color={resolvedIconColor}
+          style={styles.trailingIcon}
+        />
+      ) : null}
+    </Pressable>
+  )
+}

package/src/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button'
+export type { ButtonProps, ButtonVariant } from './types'

package/src/button/styles.ts

@@ -0,0 +1,288 @@
+import { StyleSheet } from 'react-native'
+import type { Theme } from '@onlynative/core'
+
+import type { ButtonVariant } from './types'
+import { alphaColor, blendColor } from '../utils/color'
+import { elevationStyle } from '../utils/elevation'
+
+interface VariantColors {
+  backgroundColor: string
+  textColor: string
+  borderColor: string
+  borderWidth: number
+  hoveredBackgroundColor: string
+  pressedBackgroundColor: string
+  disabledBackgroundColor: string
+  disabledTextColor: string
+  disabledBorderColor: string
+}
+
+function getVariantColors(theme: Theme, variant: ButtonVariant): VariantColors {
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)
+  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38)
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12)
+
+  if (variant === 'outlined') {
+    return {
+      backgroundColor: 'transparent',
+      textColor: theme.colors.primary,
+      borderColor: theme.colors.outline,
+      borderWidth: 1,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity,
+      ),
+      disabledBackgroundColor: 'transparent',
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: disabledOutlineColor,
+    }
+  }
+
+  if (variant === 'text') {
+    return {
+      backgroundColor: 'transparent',
+      textColor: theme.colors.primary,
+      borderColor: 'transparent',
+      borderWidth: 0,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity,
+      ),
+      disabledBackgroundColor: 'transparent',
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: 'transparent',
+    }
+  }
+
+  if (variant === 'elevated') {
+    return {
+      backgroundColor: theme.colors.surfaceContainerLow,
+      textColor: theme.colors.primary,
+      borderColor: theme.colors.surfaceContainerLow,
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity,
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: disabledContainerColor,
+    }
+  }
+
+  if (variant === 'tonal') {
+    return {
+      backgroundColor: theme.colors.secondaryContainer,
+      textColor: theme.colors.onSecondaryContainer,
+      borderColor: theme.colors.secondaryContainer,
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity,
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: disabledContainerColor,
+    }
+  }
+
+  // filled (default)
+  return {
+    backgroundColor: theme.colors.primary,
+    textColor: theme.colors.onPrimary,
+    borderColor: theme.colors.primary,
+    borderWidth: 0,
+    hoveredBackgroundColor: blendColor(
+      theme.colors.primary,
+      theme.colors.onPrimary,
+      theme.stateLayer.hoveredOpacity,
+    ),
+    pressedBackgroundColor: blendColor(
+      theme.colors.primary,
+      theme.colors.onPrimary,
+      theme.stateLayer.pressedOpacity,
+    ),
+    disabledBackgroundColor: disabledContainerColor,
+    disabledTextColor: disabledLabelColor,
+    disabledBorderColor: disabledContainerColor,
+  }
+}
+
+function getHorizontalPadding(
+  theme: Theme,
+  variant: ButtonVariant,
+  hasLeadingIcon: boolean,
+  hasTrailingIcon: boolean,
+): { paddingStart: number; paddingEnd: number } {
+  if (variant === 'text') {
+    // M3: text button uses 12dp base, opposite side of icon gets 16dp
+    return {
+      paddingStart: hasLeadingIcon
+        ? 12
+        : hasTrailingIcon
+          ? theme.spacing.md
+          : 12,
+      paddingEnd: hasTrailingIcon ? 12 : hasLeadingIcon ? theme.spacing.md : 12,
+    }
+  }
+
+  // M3: filled/elevated/tonal/outlined use 24dp base, icon side gets 16dp
+  return {
+    paddingStart: hasLeadingIcon ? theme.spacing.md : theme.spacing.lg,
+    paddingEnd: hasTrailingIcon ? theme.spacing.md : theme.spacing.lg,
+  }
+}
+
+function applyColorOverrides(
+  theme: Theme,
+  colors: VariantColors,
+  containerColor?: string,
+  contentColor?: string,
+): VariantColors {
+  if (!containerColor && !contentColor) return colors
+
+  const result = { ...colors }
+
+  if (contentColor) {
+    result.textColor = contentColor
+  }
+
+  if (containerColor) {
+    const overlay = contentColor ?? colors.textColor
+    result.backgroundColor = containerColor
+    result.borderColor = containerColor
+    result.hoveredBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.hoveredOpacity,
+    )
+    result.pressedBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.pressedOpacity,
+    )
+  } else if (contentColor) {
+    if (colors.backgroundColor === 'transparent') {
+      result.hoveredBackgroundColor = alphaColor(
+        contentColor,
+        theme.stateLayer.hoveredOpacity,
+      )
+      result.pressedBackgroundColor = alphaColor(
+        contentColor,
+        theme.stateLayer.pressedOpacity,
+      )
+    } else {
+      result.hoveredBackgroundColor = blendColor(
+        colors.backgroundColor,
+        contentColor,
+        theme.stateLayer.hoveredOpacity,
+      )
+      result.pressedBackgroundColor = blendColor(
+        colors.backgroundColor,
+        contentColor,
+        theme.stateLayer.pressedOpacity,
+      )
+    }
+  }
+
+  return result
+}
+
+export function createStyles(
+  theme: Theme,
+  variant: ButtonVariant,
+  hasLeadingIcon: boolean,
+  hasTrailingIcon: boolean,
+  containerColor?: string,
+  contentColor?: string,
+) {
+  const baseColors = getVariantColors(theme, variant)
+  const colors = applyColorOverrides(
+    theme,
+    baseColors,
+    containerColor,
+    contentColor,
+  )
+  const labelStyle = theme.typography.labelLarge
+  const padding = getHorizontalPadding(
+    theme,
+    variant,
+    hasLeadingIcon,
+    hasTrailingIcon,
+  )
+  const elevationLevel0 = elevationStyle(theme.elevation.level0)
+  const elevationLevel1 = elevationStyle(theme.elevation.level1)
+  const elevationLevel2 = elevationStyle(theme.elevation.level2)
+  const baseElevation =
+    variant === 'elevated' ? elevationLevel1 : elevationLevel0
+
+  return StyleSheet.create({
+    container: {
+      alignSelf: 'flex-start',
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      minWidth: 58,
+      minHeight: 40,
+      paddingStart: padding.paddingStart,
+      paddingEnd: padding.paddingEnd,
+      paddingVertical: 10,
+      borderRadius: theme.shape.cornerFull,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      cursor: 'pointer',
+      ...baseElevation,
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor,
+      ...(variant === 'elevated' ? elevationLevel2 : undefined),
+    },
+    pressedContainer: {
+      backgroundColor: colors.pressedBackgroundColor,
+    },
+    disabledContainer: {
+      backgroundColor: colors.disabledBackgroundColor,
+      borderColor: colors.disabledBorderColor,
+      cursor: 'auto',
+      ...elevationLevel0,
+    },
+    label: {
+      fontFamily: labelStyle.fontFamily,
+      fontSize: labelStyle.fontSize,
+      lineHeight: labelStyle.lineHeight,
+      fontWeight: labelStyle.fontWeight,
+      letterSpacing: labelStyle.letterSpacing,
+      color: colors.textColor,
+    },
+    leadingIcon: {
+      marginEnd: theme.spacing.sm,
+    },
+    trailingIcon: {
+      marginStart: theme.spacing.sm,
+    },
+    disabledLabel: {
+      color: colors.disabledTextColor,
+    },
+  })
+}

package/src/button/types.ts

@@ -0,0 +1,42 @@
+import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import type { ComponentProps } from 'react'
+import type { PressableProps, StyleProp, TextStyle } from 'react-native'
+
+/** Visual style variant of the button following Material Design 3 roles. */
+export type ButtonVariant =
+  | 'filled'
+  | 'elevated'
+  | 'outlined'
+  | 'text'
+  | 'tonal'
+
+export interface ButtonProps extends Omit<PressableProps, 'children'> {
+  /** Text label rendered inside the button. */
+  children: string
+  /**
+   * Visual variant. Controls background, border, and text color.
+   * @default 'filled'
+   */
+  variant?: ButtonVariant
+  /** Name of a MaterialCommunityIcons icon to show before the label. */
+  leadingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
+  /** Name of a MaterialCommunityIcons icon to show after the label. */
+  trailingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
+  /**
+   * Size of leading and trailing icons in dp.
+   * @default 18
+   */
+  iconSize?: number
+  /**
+   * Override the container (background) color.
+   * State-layer colors (hover, press) are derived automatically.
+   */
+  containerColor?: string
+  /**
+   * Override the content (label and icon) color.
+   * State-layer colors are derived automatically when no containerColor is set.
+   */
+  contentColor?: string
+  /** Additional style applied to the label text. */
+  labelStyle?: StyleProp<TextStyle>
+}

package/src/card/Card.tsx

@@ -0,0 +1,69 @@
+import { useMemo } from 'react'
+import { Platform, Pressable, View } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { createStyles } from './styles'
+import type { CardProps } from './types'
+
+interface PressableState {
+  pressed: boolean
+  hovered?: boolean
+}
+
+export function Card({
+  children,
+  style,
+  variant = 'elevated',
+  onPress,
+  disabled = false,
+  containerColor,
+  ...props
+}: CardProps) {
+  const isDisabled = Boolean(disabled)
+  const isInteractive = onPress !== undefined
+  const theme = useTheme()
+  const styles = useMemo(
+    () => createStyles(theme, variant, containerColor),
+    [theme, variant, containerColor],
+  )
+
+  if (!isInteractive) {
+    return (
+      <View {...props} style={[styles.container, style]}>
+        {children}
+      </View>
+    )
+  }
+
+  const resolvedStyle = (state: PressableState): StyleProp<ViewStyle> => [
+    styles.container,
+    styles.interactiveContainer,
+    state.hovered && !state.pressed && !isDisabled
+      ? styles.hoveredContainer
+      : undefined,
+    state.pressed && !isDisabled ? styles.pressedContainer : undefined,
+    isDisabled ? styles.disabledContainer : undefined,
+    typeof style === 'function'
+      ? (style as (state: PressableState) => ViewStyle)(state)
+      : style,
+  ]
+
+  return (
+    <Pressable
+      {...props}
+      role="button"
+      accessibilityState={{ disabled: isDisabled }}
+      hitSlop={Platform.OS === 'web' ? undefined : 4}
+      disabled={isDisabled}
+      onPress={onPress}
+      style={resolvedStyle}
+    >
+      {isDisabled ? (
+        <View style={styles.disabledContent}>{children}</View>
+      ) : (
+        children
+      )}
+    </Pressable>
+  )
+}

package/src/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card'
+export type { CardProps, CardVariant } from './types'

package/src/card/styles.ts

@@ -0,0 +1,151 @@
+import { StyleSheet } from 'react-native'
+import type { Theme } from '@onlynative/core'
+
+import type { CardVariant } from './types'
+import { alphaColor, blendColor } from '../utils/color'
+import { elevationStyle } from '../utils/elevation'
+
+interface VariantColors {
+  backgroundColor: string
+  borderColor: string
+  borderWidth: number
+  hoveredBackgroundColor: string
+  pressedBackgroundColor: string
+  disabledBackgroundColor: string
+  disabledBorderColor: string
+}
+
+function getVariantColors(theme: Theme, variant: CardVariant): VariantColors {
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12)
+
+  if (variant === 'outlined') {
+    return {
+      backgroundColor: theme.colors.surface,
+      borderColor: theme.colors.outline,
+      borderWidth: 1,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.onSurface,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.onSurface,
+        theme.stateLayer.pressedOpacity,
+      ),
+      disabledBackgroundColor: theme.colors.surface,
+      disabledBorderColor: disabledOutlineColor,
+    }
+  }
+
+  if (variant === 'filled') {
+    return {
+      backgroundColor: theme.colors.surfaceContainerHighest,
+      borderColor: 'transparent',
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.surfaceContainerHighest,
+        theme.colors.onSurface,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.surfaceContainerHighest,
+        theme.colors.onSurface,
+        theme.stateLayer.pressedOpacity,
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledBorderColor: 'transparent',
+    }
+  }
+
+  // elevated (default)
+  return {
+    backgroundColor: theme.colors.surface,
+    borderColor: 'transparent',
+    borderWidth: 0,
+    hoveredBackgroundColor: blendColor(
+      theme.colors.surface,
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity,
+    ),
+    pressedBackgroundColor: blendColor(
+      theme.colors.surface,
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity,
+    ),
+    disabledBackgroundColor: disabledContainerColor,
+    disabledBorderColor: 'transparent',
+  }
+}
+
+function applyColorOverrides(
+  theme: Theme,
+  colors: VariantColors,
+  containerColor?: string,
+): VariantColors {
+  if (!containerColor) return colors
+
+  return {
+    ...colors,
+    backgroundColor: containerColor,
+    borderColor: containerColor,
+    borderWidth: 0,
+    hoveredBackgroundColor: blendColor(
+      containerColor,
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity,
+    ),
+    pressedBackgroundColor: blendColor(
+      containerColor,
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity,
+    ),
+  }
+}
+
+export function createStyles(
+  theme: Theme,
+  variant: CardVariant,
+  containerColor?: string,
+) {
+  const baseColors = getVariantColors(theme, variant)
+  const colors = applyColorOverrides(theme, baseColors, containerColor)
+  const elevationLevel0 = elevationStyle(theme.elevation.level0)
+  const elevationLevel1 = elevationStyle(theme.elevation.level1)
+  const elevationLevel2 = elevationStyle(theme.elevation.level2)
+  const baseElevation =
+    variant === 'elevated' ? elevationLevel1 : elevationLevel0
+
+  return StyleSheet.create({
+    container: {
+      borderRadius: theme.shape.cornerMedium,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      overflow: 'hidden',
+      ...baseElevation,
+    },
+    interactiveContainer: {
+      cursor: 'pointer',
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor,
+      ...(variant === 'elevated'
+        ? elevationLevel2
+        : variant === 'filled'
+          ? elevationLevel1
+          : undefined),
+    },
+    pressedContainer: {
+      backgroundColor: colors.pressedBackgroundColor,
+    },
+    disabledContainer: {
+      backgroundColor: colors.disabledBackgroundColor,
+      borderColor: colors.disabledBorderColor,
+      cursor: 'auto',
+      ...elevationLevel0,
+    },
+    disabledContent: {
+      opacity: theme.stateLayer.disabledOpacity,
+    },
+  })
+}