@onlynative/components 0.1.0-alpha.0

package/src/chip/styles.ts

@@ -0,0 +1,240 @@
+import { StyleSheet } from 'react-native'
+import type { Theme } from '@onlynative/core'
+
+import type { ChipVariant } 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: ChipVariant,
+  elevated: boolean,
+  selected: boolean,
+): 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)
+
+  // Filter chip — selected state
+  if (variant === 'filter' && selected) {
+    return {
+      backgroundColor: theme.colors.secondaryContainer,
+      textColor: theme.colors.onSecondaryContainer,
+      borderColor: 'transparent',
+      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: 'transparent',
+    }
+  }
+
+  // Elevated variants (assist, filter unselected, suggestion)
+  // Input variant ignores elevated — always outlined
+  if (elevated && variant !== 'input') {
+    const textColor =
+      variant === 'assist'
+        ? theme.colors.onSurface
+        : theme.colors.onSurfaceVariant
+    return {
+      backgroundColor: theme.colors.surfaceContainerLow,
+      textColor,
+      borderColor: 'transparent',
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        textColor,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        textColor,
+        theme.stateLayer.pressedOpacity,
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: 'transparent',
+    }
+  }
+
+  // Flat (outlined) variants
+  const textColor =
+    variant === 'assist'
+      ? theme.colors.onSurface
+      : theme.colors.onSurfaceVariant
+
+  return {
+    backgroundColor: theme.colors.surface,
+    textColor,
+    borderColor: theme.colors.outline,
+    borderWidth: 1,
+    hoveredBackgroundColor: blendColor(
+      theme.colors.surface,
+      textColor,
+      theme.stateLayer.hoveredOpacity,
+    ),
+    pressedBackgroundColor: blendColor(
+      theme.colors.surface,
+      textColor,
+      theme.stateLayer.pressedOpacity,
+    ),
+    disabledBackgroundColor: disabledContainerColor,
+    disabledTextColor: disabledLabelColor,
+    disabledBorderColor: disabledOutlineColor,
+  }
+}
+
+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: ChipVariant,
+  elevated: boolean,
+  selected: boolean,
+  hasLeadingContent: boolean,
+  hasTrailingContent: boolean,
+  containerColor?: string,
+  contentColor?: string,
+) {
+  const baseColors = getVariantColors(theme, variant, elevated, selected)
+  const colors = applyColorOverrides(
+    theme,
+    baseColors,
+    containerColor,
+    contentColor,
+  )
+  const labelStyle = theme.typography.labelLarge
+  const elevationLevel0 = elevationStyle(theme.elevation.level0)
+  const elevationLevel1 = elevationStyle(theme.elevation.level1)
+  const elevationLevel2 = elevationStyle(theme.elevation.level2)
+  const isElevated = elevated && variant !== 'input'
+  const baseElevation = isElevated ? elevationLevel1 : elevationLevel0
+
+  return StyleSheet.create({
+    container: {
+      alignSelf: 'flex-start',
+      alignItems: 'center',
+      flexDirection: 'row',
+      height: 32,
+      paddingStart: hasLeadingContent ? 8 : 16,
+      paddingEnd: hasTrailingContent ? 8 : 16,
+      borderRadius: theme.shape.cornerSmall,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      cursor: 'pointer',
+      ...baseElevation,
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor,
+      ...(isElevated ? 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,
+    },
+    disabledLabel: {
+      color: colors.disabledTextColor,
+    },
+    leadingIcon: {
+      marginEnd: theme.spacing.sm,
+    },
+    avatar: {
+      marginEnd: theme.spacing.sm,
+      width: 24,
+      height: 24,
+      borderRadius: 12,
+      overflow: 'hidden' as const,
+    },
+    closeButton: {
+      marginStart: theme.spacing.sm,
+    },
+  })
+}

package/src/chip/types.ts

@@ -0,0 +1,58 @@
+import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import type { ComponentProps, ReactNode } from 'react'
+import type { PressableProps, StyleProp, TextStyle } from 'react-native'
+
+/** Visual variant of the chip following Material Design 3 chip types. */
+export type ChipVariant = 'assist' | 'filter' | 'input' | 'suggestion'
+
+export interface ChipProps extends Omit<PressableProps, 'children'> {
+  /** Text label rendered inside the chip. */
+  children: string
+  /**
+   * Chip type variant. Controls appearance, allowed interactions, and icon behavior.
+   * @default 'assist'
+   */
+  variant?: ChipVariant
+  /**
+   * Whether the chip uses an elevated surface instead of an outline border.
+   * Available on `assist`, `filter`, and `suggestion` variants.
+   * Ignored on `input` variant (always outlined).
+   * @default false
+   */
+  elevated?: boolean
+  /**
+   * Whether the chip is in a selected (toggled-on) state.
+   * Only meaningful for the `filter` variant. Ignored by other variants.
+   */
+  selected?: boolean
+  /** Name of a MaterialCommunityIcons icon to show before the label. */
+  leadingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
+  /**
+   * Size of the leading icon in dp.
+   * @default 18
+   */
+  iconSize?: number
+  /**
+   * Custom avatar content (e.g. a small Image or View) to render before the label.
+   * Only applicable to the `input` variant. Takes precedence over `leadingIcon`.
+   */
+  avatar?: ReactNode
+  /**
+   * Callback fired when the close/remove icon is pressed.
+   * When provided, renders a trailing close icon.
+   * Only renders on `input` and `filter` (when selected) variants.
+   */
+  onClose?: () => void
+  /**
+   * 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/icon-button/IconButton.tsx

@@ -0,0 +1,358 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import { useMemo } from 'react'
+import { Pressable } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { createStyles } from './styles'
+import type {
+  IconButtonProps,
+  IconButtonSize,
+  IconButtonVariant,
+} from './types'
+import { alphaColor, blendColor } from '../utils/color'
+
+function getIconColor(
+  variant: IconButtonVariant,
+  theme: ReturnType<typeof useTheme>,
+  disabled: boolean,
+  isToggle: boolean,
+  selected: boolean,
+): string {
+  if (disabled) {
+    return alphaColor(theme.colors.onSurface, 0.38)
+  }
+
+  if (isToggle) {
+    if (variant === 'filled') {
+      return selected ? theme.colors.onPrimary : theme.colors.primary
+    }
+
+    if (variant === 'tonal') {
+      return selected
+        ? theme.colors.onSecondaryContainer
+        : theme.colors.onSurfaceVariant
+    }
+
+    if (variant === 'outlined') {
+      return selected
+        ? theme.colors.inverseOnSurface
+        : theme.colors.onSurfaceVariant
+    }
+
+    return selected ? theme.colors.primary : theme.colors.onSurfaceVariant
+  }
+
+  if (variant === 'filled') {
+    return theme.colors.onPrimary
+  }
+
+  if (variant === 'tonal') {
+    return theme.colors.onSecondaryContainer
+  }
+
+  return theme.colors.onSurfaceVariant
+}
+
+function getColorStyle(
+  styles: ReturnType<typeof createStyles>,
+  variant: IconButtonVariant,
+  isToggle: boolean,
+  selected: boolean,
+) {
+  if (isToggle) {
+    if (variant === 'tonal') {
+      return selected
+        ? styles.colorTonalToggleSelected
+        : styles.colorTonalToggleUnselected
+    }
+
+    if (variant === 'outlined') {
+      return selected
+        ? styles.colorOutlinedToggleSelected
+        : styles.colorOutlined
+    }
+
+    if (variant === 'standard') {
+      return selected
+        ? styles.colorStandardToggleSelected
+        : styles.colorStandard
+    }
+
+    return selected
+      ? styles.colorFilledToggleSelected
+      : styles.colorFilledToggleUnselected
+  }
+
+  if (variant === 'tonal') {
+    return styles.colorTonal
+  }
+
+  if (variant === 'outlined') {
+    return styles.colorOutlined
+  }
+
+  if (variant === 'standard') {
+    return styles.colorStandard
+  }
+
+  return styles.colorFilled
+}
+
+function getSizeStyle(
+  styles: ReturnType<typeof createStyles>,
+  size: IconButtonSize,
+) {
+  if (size === 'small') {
+    return styles.sizeSmall
+  }
+
+  if (size === 'large') {
+    return styles.sizeLarge
+  }
+
+  return styles.sizeMedium
+}
+
+function getIconPixelSize(size: IconButtonSize): number {
+  if (size === 'small') {
+    return 18
+  }
+
+  if (size === 'large') {
+    return 28
+  }
+
+  return 24
+}
+
+function getDefaultHitSlop(size: IconButtonSize): number {
+  if (size === 'small') {
+    return 8
+  }
+
+  if (size === 'large') {
+    return 0
+  }
+
+  return 4
+}
+
+function getHoveredStyle(
+  styles: ReturnType<typeof createStyles>,
+  variant: IconButtonVariant,
+  isToggle: boolean,
+  selected: boolean,
+) {
+  if (isToggle) {
+    if (variant === 'tonal') {
+      return selected
+        ? styles.hoveredTonalToggleSelected
+        : styles.hoveredTonalToggleUnselected
+    }
+
+    if (variant === 'outlined') {
+      return selected
+        ? styles.hoveredOutlinedToggleSelected
+        : styles.hoveredOutlinedToggleUnselected
+    }
+
+    if (variant === 'standard') {
+      return selected
+        ? styles.hoveredStandardToggleSelected
+        : styles.hoveredStandardToggleUnselected
+    }
+
+    return selected
+      ? styles.hoveredFilledToggleSelected
+      : styles.hoveredFilledToggleUnselected
+  }
+
+  if (variant === 'tonal') {
+    return styles.hoveredTonal
+  }
+
+  if (variant === 'outlined') {
+    return styles.hoveredOutlined
+  }
+
+  if (variant === 'standard') {
+    return styles.hoveredStandard
+  }
+
+  return styles.hoveredFilled
+}
+
+function getPressedStyle(
+  styles: ReturnType<typeof createStyles>,
+  variant: IconButtonVariant,
+  isToggle: boolean,
+  selected: boolean,
+) {
+  if (isToggle) {
+    if (variant === 'tonal') {
+      return selected
+        ? styles.pressedTonalToggleSelected
+        : styles.pressedTonalToggleUnselected
+    }
+
+    if (variant === 'outlined') {
+      return selected
+        ? styles.pressedOutlinedToggleSelected
+        : styles.pressedOutlinedToggleUnselected
+    }
+
+    if (variant === 'standard') {
+      return selected
+        ? styles.pressedStandardToggleSelected
+        : styles.pressedStandardToggleUnselected
+    }
+
+    return selected
+      ? styles.pressedFilledToggleSelected
+      : styles.pressedFilledToggleUnselected
+  }
+
+  if (variant === 'tonal') {
+    return styles.pressedTonal
+  }
+
+  if (variant === 'outlined') {
+    return styles.pressedOutlined
+  }
+
+  if (variant === 'standard') {
+    return styles.pressedStandard
+  }
+
+  return styles.pressedFilled
+}
+
+function getDisabledStyle(
+  styles: ReturnType<typeof createStyles>,
+  variant: IconButtonVariant,
+) {
+  if (variant === 'tonal') {
+    return styles.disabledTonal
+  }
+
+  if (variant === 'outlined') {
+    return styles.disabledOutlined
+  }
+
+  if (variant === 'standard') {
+    return styles.disabledStandard
+  }
+
+  return styles.disabledFilled
+}
+
+export function IconButton({
+  icon,
+  selectedIcon,
+  iconColor,
+  contentColor,
+  containerColor,
+  style,
+  onPress,
+  disabled = false,
+  variant = 'filled',
+  selected,
+  size = 'medium',
+  hitSlop,
+  accessibilityLabel,
+  ...props
+}: IconButtonProps) {
+  const theme = useTheme()
+  const styles = useMemo(() => createStyles(theme), [theme])
+  const isDisabled = Boolean(disabled)
+  const isToggle = selected !== undefined
+  const isSelected = Boolean(selected)
+  const resolvedIconColor =
+    contentColor ??
+    iconColor ??
+    getIconColor(variant, theme, isDisabled, isToggle, isSelected)
+  const displayIcon =
+    isToggle && isSelected && selectedIcon ? selectedIcon : icon
+  const iconPixelSize = getIconPixelSize(size)
+  const accessibilityState = isToggle
+    ? { disabled: isDisabled, selected: isSelected }
+    : { disabled: isDisabled }
+
+  const containerOverrides = useMemo(() => {
+    if (!containerColor) return null
+    const overlay = resolvedIconColor
+    return {
+      base: {
+        backgroundColor: containerColor,
+        borderColor: containerColor,
+        borderWidth: 0,
+      } as ViewStyle,
+      hovered: {
+        backgroundColor: blendColor(
+          containerColor,
+          overlay,
+          theme.stateLayer.hoveredOpacity,
+        ),
+      } as ViewStyle,
+      pressed: {
+        backgroundColor: blendColor(
+          containerColor,
+          overlay,
+          theme.stateLayer.pressedOpacity,
+        ),
+      } as ViewStyle,
+    }
+  }, [containerColor, resolvedIconColor, theme.stateLayer])
+
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={accessibilityState}
+      disabled={isDisabled}
+      hitSlop={hitSlop ?? getDefaultHitSlop(size)}
+      onPress={onPress}
+      style={({
+        pressed,
+        hovered,
+      }: {
+        pressed: boolean
+        hovered?: boolean
+      }) => {
+        const base: StyleProp<ViewStyle>[] = [
+          styles.container,
+          getSizeStyle(styles, size),
+          getColorStyle(styles, variant, isToggle, isSelected),
+          containerOverrides?.base,
+          hovered && !pressed && !isDisabled
+            ? containerOverrides
+              ? containerOverrides.hovered
+              : getHoveredStyle(styles, variant, isToggle, isSelected)
+            : undefined,
+          pressed && !isDisabled
+            ? containerOverrides
+              ? containerOverrides.pressed
+              : getPressedStyle(styles, variant, isToggle, isSelected)
+            : undefined,
+          isDisabled ? getDisabledStyle(styles, variant) : undefined,
+        ]
+
+        if (typeof style === 'function') {
+          base.push(style({ pressed }))
+        } else if (style) {
+          base.push(style)
+        }
+
+        return base
+      }}
+    >
+      <MaterialCommunityIcons
+        name={displayIcon}
+        size={iconPixelSize}
+        color={resolvedIconColor}
+      />
+    </Pressable>
+  )
+}

package/src/icon-button/index.ts

@@ -0,0 +1,6 @@
+export { IconButton } from './IconButton'
+export type {
+  IconButtonProps,
+  IconButtonSize,
+  IconButtonVariant,
+} from './types'