@onlynative/components 0.1.0-alpha.0

package/src/radio/types.ts

@@ -0,0 +1,20 @@
+import type { PressableProps } from 'react-native'
+
+export interface RadioProps extends Omit<PressableProps, 'children'> {
+  /**
+   * Whether the radio button is selected.
+   * @default false
+   */
+  value?: boolean
+  /** Callback fired when the radio is pressed. Receives the new value. */
+  onValueChange?: (value: boolean) => void
+  /**
+   * Override the outer ring and inner dot color when selected.
+   * State-layer colors (hover, press) are derived automatically.
+   */
+  containerColor?: string
+  /**
+   * Override the outer ring color when unselected.
+   */
+  contentColor?: string
+}

package/src/switch/Switch.tsx

@@ -0,0 +1,118 @@
+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 { SwitchProps } from './types'
+
+interface PressableState {
+  pressed: boolean
+  hovered?: boolean
+}
+
+function resolveStyle(
+  trackStyle: StyleProp<ViewStyle>,
+  hoveredTrackStyle: StyleProp<ViewStyle>,
+  pressedTrackStyle: StyleProp<ViewStyle>,
+  disabledTrackStyle: StyleProp<ViewStyle>,
+  disabled: boolean,
+  style: SwitchProps['style'],
+): (state: PressableState) => StyleProp<ViewStyle> {
+  if (typeof style === 'function') {
+    return (state) => [
+      trackStyle,
+      state.hovered && !state.pressed && !disabled
+        ? hoveredTrackStyle
+        : undefined,
+      state.pressed && !disabled ? pressedTrackStyle : undefined,
+      disabled ? disabledTrackStyle : undefined,
+      style(state),
+    ]
+  }
+
+  return (state) => [
+    trackStyle,
+    state.hovered && !state.pressed && !disabled
+      ? hoveredTrackStyle
+      : undefined,
+    state.pressed && !disabled ? pressedTrackStyle : undefined,
+    disabled ? disabledTrackStyle : undefined,
+    style,
+  ]
+}
+
+export function Switch({
+  style,
+  value = false,
+  onValueChange,
+  selectedIcon = 'check',
+  unselectedIcon,
+  containerColor,
+  contentColor,
+  disabled = false,
+  ...props
+}: SwitchProps) {
+  const isDisabled = Boolean(disabled)
+  const isSelected = Boolean(value)
+  const hasIcon = isSelected || Boolean(unselectedIcon)
+
+  const theme = useTheme()
+  const styles = useMemo(
+    () =>
+      createStyles(theme, isSelected, hasIcon, containerColor, contentColor),
+    [theme, isSelected, hasIcon, 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?.(!isSelected)
+    }
+  }
+
+  const iconName = isSelected ? selectedIcon : unselectedIcon
+  const iconSize = 16
+
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole="switch"
+      accessibilityState={{
+        disabled: isDisabled,
+        checked: isSelected,
+      }}
+      hitSlop={Platform.OS === 'web' ? undefined : 4}
+      disabled={isDisabled}
+      onPress={handlePress}
+      style={resolveStyle(
+        styles.track,
+        styles.hoveredTrack,
+        styles.pressedTrack,
+        styles.disabledTrack,
+        isDisabled,
+        style,
+      )}
+    >
+      <View
+        style={[styles.thumb, isDisabled ? styles.disabledThumb : undefined]}
+      >
+        {iconName ? (
+          <MaterialCommunityIcons
+            name={iconName}
+            size={iconSize}
+            color={resolvedIconColor}
+          />
+        ) : null}
+      </View>
+    </Pressable>
+  )
+}

package/src/switch/index.ts

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

package/src/switch/styles.ts

@@ -0,0 +1,172 @@
+import { StyleSheet } from 'react-native'
+import type { Theme } from '@onlynative/core'
+
+import { alphaColor, blendColor } from '../utils/color'
+
+interface TrackColors {
+  trackColor: string
+  thumbColor: string
+  iconColor: string
+  hoveredTrackColor: string
+  pressedTrackColor: string
+  borderColor: string
+  borderWidth: number
+  disabledTrackColor: string
+  disabledThumbColor: string
+  disabledBorderColor: string
+  disabledBorderWidth: number
+}
+
+function getColors(theme: Theme, selected: boolean): TrackColors {
+  const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12)
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38)
+
+  if (selected) {
+    return {
+      trackColor: theme.colors.primary,
+      thumbColor: theme.colors.onPrimary,
+      iconColor: theme.colors.onPrimaryContainer,
+      hoveredTrackColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedTrackColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity,
+      ),
+      borderColor: 'transparent',
+      borderWidth: 0,
+      disabledTrackColor: disabledOnSurface12,
+      disabledThumbColor: theme.colors.surface,
+      disabledBorderColor: 'transparent',
+      disabledBorderWidth: 0,
+    }
+  }
+
+  return {
+    trackColor: theme.colors.surfaceContainerHighest,
+    thumbColor: theme.colors.outline,
+    iconColor: theme.colors.surfaceContainerHighest,
+    hoveredTrackColor: blendColor(
+      theme.colors.surfaceContainerHighest,
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity,
+    ),
+    pressedTrackColor: blendColor(
+      theme.colors.surfaceContainerHighest,
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity,
+    ),
+    borderColor: theme.colors.outline,
+    borderWidth: 2,
+    disabledTrackColor: disabledOnSurface12,
+    disabledThumbColor: disabledOnSurface38,
+    disabledBorderColor: disabledOnSurface12,
+    disabledBorderWidth: 2,
+  }
+}
+
+function applyColorOverrides(
+  theme: Theme,
+  colors: TrackColors,
+  containerColor?: string,
+  contentColor?: string,
+): TrackColors {
+  if (!containerColor && !contentColor) return colors
+
+  const result = { ...colors }
+
+  if (contentColor) {
+    result.thumbColor = contentColor
+    result.iconColor = contentColor
+  }
+
+  if (containerColor) {
+    const overlay = contentColor ?? colors.thumbColor
+    result.trackColor = containerColor
+    result.borderColor = containerColor
+    result.hoveredTrackColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.hoveredOpacity,
+    )
+    result.pressedTrackColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.pressedOpacity,
+    )
+    if (contentColor) {
+      result.iconColor = containerColor
+    }
+  }
+
+  return result
+}
+
+export function createStyles(
+  theme: Theme,
+  selected: boolean,
+  hasIcon: boolean,
+  containerColor?: string,
+  contentColor?: string,
+) {
+  const colors = applyColorOverrides(
+    theme,
+    getColors(theme, selected),
+    containerColor,
+    contentColor,
+  )
+
+  const thumbSize = selected || hasIcon ? 24 : 16
+  const trackWidth = 52
+  const trackHeight = 32
+  const trackPadding = 4
+  const thumbOffset = selected
+    ? trackWidth - trackPadding - thumbSize
+    : trackPadding
+
+  return StyleSheet.create({
+    track: {
+      width: trackWidth,
+      height: trackHeight,
+      borderRadius: trackHeight / 2,
+      backgroundColor: colors.trackColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      justifyContent: 'center',
+      cursor: 'pointer',
+    },
+    hoveredTrack: {
+      backgroundColor: colors.hoveredTrackColor,
+    },
+    pressedTrack: {
+      backgroundColor: colors.pressedTrackColor,
+    },
+    disabledTrack: {
+      backgroundColor: colors.disabledTrackColor,
+      borderColor: colors.disabledBorderColor,
+      borderWidth: colors.disabledBorderWidth,
+      cursor: 'auto',
+    },
+    thumb: {
+      width: thumbSize,
+      height: thumbSize,
+      borderRadius: thumbSize / 2,
+      backgroundColor: colors.thumbColor,
+      marginStart: thumbOffset,
+      alignItems: 'center' as const,
+      justifyContent: 'center' as const,
+    },
+    disabledThumb: {
+      backgroundColor: colors.disabledThumbColor,
+    },
+    iconColor: {
+      color: colors.iconColor,
+    },
+    disabledIconColor: {
+      color: alphaColor(theme.colors.onSurface, 0.38),
+    },
+  })
+}

package/src/switch/types.ts

@@ -0,0 +1,32 @@
+import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import type { ComponentProps } from 'react'
+import type { PressableProps } from 'react-native'
+
+export interface SwitchProps extends Omit<PressableProps, 'children'> {
+  /**
+   * Whether the switch is toggled on.
+   * @default false
+   */
+  value?: boolean
+  /** Callback fired when the switch is toggled. Receives the new value. */
+  onValueChange?: (value: boolean) => void
+  /**
+   * Name of a MaterialCommunityIcons icon to show on the thumb when selected.
+   * @default 'check'
+   */
+  selectedIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
+  /**
+   * Name of a MaterialCommunityIcons icon to show on the thumb when unselected.
+   * When provided, the thumb renders at the larger selected size.
+   */
+  unselectedIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
+  /**
+   * Override the track color.
+   * State-layer colors (hover, press) are derived automatically.
+   */
+  containerColor?: string
+  /**
+   * Override the thumb and icon color.
+   */
+  contentColor?: string
+}

package/src/test-utils/render-with-theme.tsx

@@ -0,0 +1,13 @@
+import { render, type RenderOptions } from '@testing-library/react-native'
+import type { ReactElement } from 'react'
+import { MaterialProvider } from '@onlynative/core'
+
+export function renderWithTheme(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+) {
+  return render(ui, {
+    wrapper: ({ children }) => <MaterialProvider>{children}</MaterialProvider>,
+    ...options,
+  })
+}

package/src/text-field/TextField.tsx

@@ -0,0 +1,298 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Animated,
+  Platform,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from 'react-native'
+import type { NativeSyntheticEvent, TargetedEvent } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { createStyles, labelPositions } from './styles'
+import type { TextFieldProps } from './types'
+
+const ICON_SIZE = 24
+// 12dp icon inset + 24dp icon + 16dp gap
+const ICON_WITH_GAP = 12 + 24 + 16
+
+export function TextField({
+  value,
+  onChangeText,
+  label,
+  placeholder,
+  variant = 'filled',
+  supportingText,
+  errorText,
+  error = false,
+  disabled = false,
+  leadingIcon,
+  trailingIcon,
+  onTrailingIconPress,
+  multiline = false,
+  onFocus,
+  onBlur,
+  style,
+  containerColor,
+  contentColor,
+  inputStyle,
+  ...textInputProps
+}: TextFieldProps) {
+  const theme = useTheme()
+  const isDisabled = Boolean(disabled)
+  const isError = Boolean(error) || Boolean(errorText)
+  const isFilled = variant === 'filled'
+  const hasLeadingIcon = Boolean(leadingIcon)
+
+  const { colors, styles } = useMemo(
+    () => createStyles(theme, variant),
+    [theme, variant],
+  )
+
+  const [isFocused, setIsFocused] = useState(false)
+  const [internalHasText, setInternalHasText] = useState(
+    () => value !== undefined && value !== '',
+  )
+  const inputRef = useRef<TextInput>(null)
+
+  const isControlled = value !== undefined
+  const hasValue = isControlled ? value !== '' : internalHasText
+  const isLabelFloated = isFocused || hasValue
+
+  // Animation: 0 = resting (label large, centered), 1 = floated (label small, top)
+  const labelAnimRef = useRef(new Animated.Value(isLabelFloated ? 1 : 0))
+  const labelAnim = labelAnimRef.current
+
+  useEffect(() => {
+    Animated.timing(labelAnim, {
+      toValue: isLabelFloated ? 1 : 0,
+      duration: 150,
+      useNativeDriver: Platform.OS !== 'web',
+    }).start()
+  }, [isLabelFloated, labelAnim])
+
+  // Scale: bodyLarge/bodySmall when resting → 1.0 when floated.
+  // Label is always rendered at bodySmall size; scale makes it appear as bodyLarge.
+  const labelScale = useMemo(() => {
+    const restingScale =
+      theme.typography.bodyLarge.fontSize / theme.typography.bodySmall.fontSize
+    return labelAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [restingScale, 1],
+    })
+  }, [
+    labelAnim,
+    theme.typography.bodyLarge.fontSize,
+    theme.typography.bodySmall.fontSize,
+  ])
+
+  // TranslateY: moves label from floated position down to resting position.
+  // Static top = floatedTop; translateY shifts it to restingTop when at rest.
+  const labelTranslateY = useMemo(() => {
+    const restingTop = isFilled
+      ? labelPositions.filledRestingTop
+      : labelPositions.outlinedRestingTop
+    const floatedTop = isFilled
+      ? labelPositions.filledFloatedTop
+      : labelPositions.outlinedFloatedTop
+    const restingOffset = restingTop - floatedTop
+    return labelAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [restingOffset, 0],
+    })
+  }, [isFilled, labelAnim])
+
+  // Label start: 16dp container padding + leading icon space (12dp inset + 24dp + 16dp gap)
+  const labelStart =
+    theme.spacing.md + (hasLeadingIcon ? ICON_WITH_GAP - theme.spacing.md : 0)
+  // Static top = floated position; translateY handles resting offset
+  const labelStaticTop = isFilled
+    ? labelPositions.filledFloatedTop
+    : labelPositions.outlinedFloatedTop
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      if (!isControlled) {
+        setInternalHasText(text !== '')
+      }
+      onChangeText?.(text)
+    },
+    [isControlled, onChangeText],
+  )
+
+  const handleFocus = useCallback(
+    (event: NativeSyntheticEvent<TargetedEvent>) => {
+      if (isDisabled) return
+      setIsFocused(true)
+      onFocus?.(event)
+    },
+    [isDisabled, onFocus],
+  )
+
+  const handleBlur = useCallback(
+    (event: NativeSyntheticEvent<TargetedEvent>) => {
+      setIsFocused(false)
+      onBlur?.(event)
+    },
+    [onBlur],
+  )
+
+  const handleContainerPress = useCallback(() => {
+    if (!isDisabled) {
+      inputRef.current?.focus()
+    }
+  }, [isDisabled])
+
+  const labelColor = isDisabled
+    ? colors.disabledLabelColor
+    : isError
+      ? colors.errorLabelColor
+      : isFocused
+        ? colors.focusedLabelColor
+        : colors.labelColor
+
+  const labelBackgroundColor =
+    variant === 'outlined' && isLabelFloated
+      ? theme.colors.surface
+      : 'transparent'
+
+  const iconColor = isDisabled
+    ? colors.disabledIconColor
+    : isError
+      ? colors.errorIconColor
+      : contentColor ?? colors.iconColor
+
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      containerColor && !isDisabled
+        ? { backgroundColor: containerColor }
+        : undefined,
+      isFocused && styles.containerFocused,
+      isError && !isFocused && styles.containerError,
+      isDisabled && styles.containerDisabled,
+    ],
+    [styles, isFocused, isError, isDisabled, containerColor],
+  )
+
+  const indicatorStyle = useMemo(
+    () => [
+      styles.indicator,
+      isFocused && styles.indicatorFocused,
+      isError && !isFocused && styles.indicatorError,
+      isDisabled && styles.indicatorDisabled,
+    ],
+    [styles, isFocused, isError, isDisabled],
+  )
+
+  const displaySupportingText = isError ? errorText : supportingText
+
+  return (
+    <View style={[styles.root, style]}>
+      <Pressable onPress={handleContainerPress} disabled={isDisabled}>
+        <View style={containerStyle}>
+          {leadingIcon ? (
+            <View style={styles.leadingIcon}>
+              <MaterialCommunityIcons
+                name={leadingIcon}
+                size={ICON_SIZE}
+                color={iconColor}
+              />
+            </View>
+          ) : null}
+
+          <View
+            style={[
+              styles.inputWrapper,
+              label ? styles.inputWrapperWithLabel : undefined,
+            ]}
+          >
+            <TextInput
+              ref={inputRef}
+              {...textInputProps}
+              value={value}
+              onChangeText={handleChangeText}
+              editable={!isDisabled}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              placeholder={isLabelFloated || !label ? placeholder : undefined}
+              placeholderTextColor={colors.placeholderColor}
+              multiline={multiline}
+              style={[
+                styles.input,
+                isDisabled ? styles.inputDisabled : undefined,
+                contentColor && !isDisabled
+                  ? { color: contentColor }
+                  : undefined,
+                inputStyle,
+              ]}
+              accessibilityLabel={label || undefined}
+              accessibilityState={{ disabled: isDisabled }}
+              accessibilityHint={isError && errorText ? errorText : undefined}
+            />
+          </View>
+
+          {trailingIcon ? (
+            <Pressable
+              onPress={onTrailingIconPress}
+              disabled={isDisabled || !onTrailingIconPress}
+              accessibilityRole="button"
+              hitSlop={12}
+              style={styles.trailingIconPressable}
+            >
+              <View style={styles.trailingIcon}>
+                <MaterialCommunityIcons
+                  name={trailingIcon}
+                  size={ICON_SIZE}
+                  color={iconColor}
+                />
+              </View>
+            </Pressable>
+          ) : null}
+
+          {/* Label: rendered at bodySmall, scaled up via transform when resting */}
+          {label ? (
+            <Animated.Text
+              numberOfLines={1}
+              style={[
+                styles.label,
+                {
+                  top: labelStaticTop,
+                  start: labelStart,
+                  color: labelColor,
+                  backgroundColor: labelBackgroundColor,
+                  transform: [
+                    { translateY: labelTranslateY },
+                    { scale: labelScale },
+                  ],
+                },
+                variant === 'outlined' && isLabelFloated
+                  ? styles.labelNotch
+                  : undefined,
+              ]}
+            >
+              {label}
+            </Animated.Text>
+          ) : null}
+
+          {isFilled ? <View style={indicatorStyle} /> : null}
+        </View>
+      </Pressable>
+
+      {displaySupportingText ? (
+        <View style={styles.supportingTextRow}>
+          <Text
+            style={[
+              styles.supportingText,
+              isError ? styles.errorSupportingText : undefined,
+            ]}
+          >
+            {displaySupportingText}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  )
+}

package/src/text-field/index.ts

@@ -0,0 +1,2 @@
+export { TextField } from './TextField'
+export type { TextFieldProps, TextFieldVariant } from './types'