@onlynative/components 0.1.0-alpha.0

package/src/card/types.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+import type { ViewProps } from 'react-native'
+
+/** Surface style variant of the card following Material Design 3 roles. */
+export type CardVariant = 'elevated' | 'filled' | 'outlined'
+
+export interface CardProps extends ViewProps {
+  /** Content rendered inside the card surface. */
+  children: ReactNode
+  /**
+   * Surface style variant.
+   * @default 'elevated'
+   */
+  variant?: CardVariant
+  /** When provided, the card becomes interactive (Pressable). Omit to render as a plain View. */
+  onPress?: () => void
+  /**
+   * Disables the press interaction and reduces opacity. Only effective when `onPress` is provided.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Override the container (background) color.
+   * State-layer colors (hover, press) are derived automatically.
+   */
+  containerColor?: string
+}

package/src/checkbox/Checkbox.tsx

@@ -0,0 +1,109 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import { useMemo } from 'react'
+import { Platform, Pressable, StyleSheet, View } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { createStyles } from './styles'
+import type { CheckboxProps } 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: CheckboxProps['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 Checkbox({
+  style,
+  value = false,
+  onValueChange,
+  containerColor,
+  contentColor,
+  disabled = false,
+  ...props
+}: CheckboxProps) {
+  const isDisabled = Boolean(disabled)
+  const isChecked = Boolean(value)
+
+  const theme = useTheme()
+  const styles = useMemo(
+    () => createStyles(theme, isChecked, containerColor, contentColor),
+    [theme, isChecked, containerColor, contentColor],
+  )
+
+  const resolvedIconColor = useMemo(() => {
+    const base = StyleSheet.flatten([
+      styles.iconColor,
+      isDisabled ? styles.disabledIconColor : undefined,
+    ])
+    return typeof base?.color === 'string' ? base.color : undefined
+  }, [styles.iconColor, styles.disabledIconColor, isDisabled])
+
+  const handlePress = () => {
+    if (!isDisabled) {
+      onValueChange?.(!isChecked)
+    }
+  }
+
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole="checkbox"
+      accessibilityState={{
+        disabled: isDisabled,
+        checked: isChecked,
+      }}
+      hitSlop={Platform.OS === 'web' ? undefined : 4}
+      disabled={isDisabled}
+      onPress={handlePress}
+      style={resolveStyle(
+        styles.container,
+        styles.hoveredContainer,
+        styles.pressedContainer,
+        styles.disabledContainer,
+        isDisabled,
+        style,
+      )}
+    >
+      <View style={[styles.box, isDisabled ? styles.disabledBox : undefined]}>
+        {isChecked ? (
+          <MaterialCommunityIcons
+            name="check"
+            size={14}
+            color={resolvedIconColor}
+          />
+        ) : null}
+      </View>
+    </Pressable>
+  )
+}

package/src/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox'
+export type { CheckboxProps } from './types'

package/src/checkbox/styles.ts

@@ -0,0 +1,155 @@
+import { StyleSheet } from 'react-native'
+import type { Theme } from '@onlynative/core'
+
+import { alphaColor, blendColor } from '../utils/color'
+
+interface BoxColors {
+  backgroundColor: string
+  borderColor: string
+  borderWidth: number
+  iconColor: string
+  hoveredBackgroundColor: string
+  pressedBackgroundColor: string
+  disabledBackgroundColor: string
+  disabledBorderColor: string
+  disabledBorderWidth: number
+  disabledIconColor: string
+}
+
+function getColors(theme: Theme, checked: boolean): BoxColors {
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38)
+
+  if (checked) {
+    return {
+      backgroundColor: theme.colors.primary,
+      borderColor: 'transparent',
+      borderWidth: 0,
+      iconColor: theme.colors.onPrimary,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity,
+      ),
+      disabledBackgroundColor: disabledOnSurface38,
+      disabledBorderColor: 'transparent',
+      disabledBorderWidth: 0,
+      disabledIconColor: theme.colors.surface,
+    }
+  }
+
+  return {
+    backgroundColor: 'transparent',
+    borderColor: theme.colors.onSurfaceVariant,
+    borderWidth: 2,
+    iconColor: 'transparent',
+    hoveredBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity,
+    ),
+    pressedBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity,
+    ),
+    disabledBackgroundColor: 'transparent',
+    disabledBorderColor: disabledOnSurface38,
+    disabledBorderWidth: 2,
+    disabledIconColor: 'transparent',
+  }
+}
+
+function applyColorOverrides(
+  theme: Theme,
+  colors: BoxColors,
+  containerColor?: string,
+  contentColor?: string,
+): BoxColors {
+  if (!containerColor && !contentColor) return colors
+
+  const result = { ...colors }
+
+  if (contentColor) {
+    result.iconColor = contentColor
+  }
+
+  if (containerColor) {
+    const overlay = contentColor ?? colors.iconColor
+    result.backgroundColor = containerColor
+    result.borderColor = containerColor
+    result.hoveredBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.hoveredOpacity,
+    )
+    result.pressedBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.pressedOpacity,
+    )
+  }
+
+  return result
+}
+
+export function createStyles(
+  theme: Theme,
+  checked: boolean,
+  containerColor?: string,
+  contentColor?: string,
+) {
+  const colors = applyColorOverrides(
+    theme,
+    getColors(theme, checked),
+    containerColor,
+    contentColor,
+  )
+
+  const size = 18
+  const touchTarget = 48
+
+  return StyleSheet.create({
+    container: {
+      width: touchTarget,
+      height: touchTarget,
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+    },
+    hoveredContainer: {
+      borderRadius: touchTarget / 2,
+      backgroundColor: colors.hoveredBackgroundColor,
+    },
+    pressedContainer: {
+      borderRadius: touchTarget / 2,
+      backgroundColor: colors.pressedBackgroundColor,
+    },
+    disabledContainer: {
+      cursor: 'auto',
+    },
+    box: {
+      width: size,
+      height: size,
+      borderRadius: theme.shape.cornerExtraSmall,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      alignItems: 'center' as const,
+      justifyContent: 'center' as const,
+    },
+    disabledBox: {
+      backgroundColor: colors.disabledBackgroundColor,
+      borderColor: colors.disabledBorderColor,
+      borderWidth: colors.disabledBorderWidth,
+    },
+    iconColor: {
+      color: colors.iconColor,
+    },
+    disabledIconColor: {
+      color: colors.disabledIconColor,
+    },
+  })
+}

package/src/checkbox/types.ts

@@ -0,0 +1,20 @@
+import type { PressableProps } from 'react-native'
+
+export interface CheckboxProps extends Omit<PressableProps, 'children'> {
+  /**
+   * Whether the checkbox is checked.
+   * @default false
+   */
+  value?: boolean
+  /** Callback fired when the checkbox is toggled. Receives the new value. */
+  onValueChange?: (value: boolean) => void
+  /**
+   * Override the container (box) color when checked.
+   * State-layer colors (hover, press) are derived automatically.
+   */
+  containerColor?: string
+  /**
+   * Override the checkmark icon color.
+   */
+  contentColor?: string
+}

package/src/chip/Chip.tsx

@@ -0,0 +1,182 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import { useMemo } from 'react'
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { createStyles } from './styles'
+import type { ChipProps } 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: ChipProps['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 Chip({
+  children,
+  style,
+  variant = 'assist',
+  elevated = false,
+  selected = false,
+  leadingIcon,
+  iconSize = 18,
+  avatar,
+  onClose,
+  containerColor,
+  contentColor,
+  labelStyle: labelStyleOverride,
+  disabled = false,
+  ...props
+}: ChipProps) {
+  const isDisabled = Boolean(disabled)
+  const isSelected = variant === 'filter' ? Boolean(selected) : false
+
+  const showCloseIcon =
+    onClose !== undefined &&
+    (variant === 'input' || (variant === 'filter' && isSelected))
+
+  const hasLeadingContent = Boolean(
+    (variant === 'input' && avatar) ||
+      leadingIcon ||
+      (variant === 'filter' && isSelected),
+  )
+
+  const theme = useTheme()
+  const styles = useMemo(
+    () =>
+      createStyles(
+        theme,
+        variant,
+        elevated,
+        isSelected,
+        hasLeadingContent,
+        showCloseIcon,
+        containerColor,
+        contentColor,
+      ),
+    [
+      theme,
+      variant,
+      elevated,
+      isSelected,
+      hasLeadingContent,
+      showCloseIcon,
+      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],
+  )
+
+  const renderLeadingContent = () => {
+    if (variant === 'input' && avatar) {
+      return <View style={styles.avatar}>{avatar}</View>
+    }
+    if (leadingIcon) {
+      return (
+        <MaterialCommunityIcons
+          name={leadingIcon}
+          size={iconSize}
+          color={resolvedIconColor}
+          style={styles.leadingIcon}
+        />
+      )
+    }
+    if (variant === 'filter' && isSelected) {
+      return (
+        <MaterialCommunityIcons
+          name="check"
+          size={iconSize}
+          color={resolvedIconColor}
+          style={styles.leadingIcon}
+        />
+      )
+    }
+    return null
+  }
+
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole="button"
+      accessibilityState={{
+        disabled: isDisabled,
+        ...(variant === 'filter' ? { selected: isSelected } : undefined),
+      }}
+      hitSlop={Platform.OS === 'web' ? undefined : 4}
+      disabled={isDisabled}
+      style={resolveStyle(
+        styles.container,
+        styles.hoveredContainer,
+        styles.pressedContainer,
+        styles.disabledContainer,
+        isDisabled,
+        style,
+      )}
+    >
+      {renderLeadingContent()}
+      <Text style={computedLabelStyle}>{children}</Text>
+      {showCloseIcon ? (
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel="Remove"
+          hitSlop={4}
+          style={styles.closeButton}
+        >
+          <MaterialCommunityIcons
+            name="close"
+            size={iconSize}
+            color={resolvedIconColor}
+          />
+        </Pressable>
+      ) : null}
+    </Pressable>
+  )
+}

package/src/chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip'
+export type { ChipProps, ChipVariant } from './types'