@onlynative/components 0.1.0 → 0.1.1-alpha.1

package/src/radio/styles.ts

@@ -1,139 +0,0 @@
-import { StyleSheet } from 'react-native'
-import type { MaterialTheme } from '@onlynative/core'
-
-import { alphaColor } from '@onlynative/utils'
-
-interface RadioColors {
-  borderColor: string
-  dotColor: string
-  hoveredBackgroundColor: string
-  pressedBackgroundColor: string
-  disabledBorderColor: string
-  disabledDotColor: string
-}
-
-function getColors(theme: MaterialTheme, selected: boolean): RadioColors {
-  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38)
-
-  if (selected) {
-    return {
-      borderColor: theme.colors.primary,
-      dotColor: theme.colors.primary,
-      hoveredBackgroundColor: alphaColor(
-        theme.colors.primary,
-        theme.stateLayer.hoveredOpacity,
-      ),
-      pressedBackgroundColor: alphaColor(
-        theme.colors.primary,
-        theme.stateLayer.pressedOpacity,
-      ),
-      disabledBorderColor: disabledOnSurface38,
-      disabledDotColor: disabledOnSurface38,
-    }
-  }
-
-  return {
-    borderColor: theme.colors.onSurfaceVariant,
-    dotColor: 'transparent',
-    hoveredBackgroundColor: alphaColor(
-      theme.colors.onSurface,
-      theme.stateLayer.hoveredOpacity,
-    ),
-    pressedBackgroundColor: alphaColor(
-      theme.colors.onSurface,
-      theme.stateLayer.pressedOpacity,
-    ),
-    disabledBorderColor: disabledOnSurface38,
-    disabledDotColor: 'transparent',
-  }
-}
-
-function applyColorOverrides(
-  theme: MaterialTheme,
-  colors: RadioColors,
-  containerColor?: string,
-  contentColor?: string,
-): RadioColors {
-  if (!containerColor && !contentColor) return colors
-
-  const result = { ...colors }
-
-  if (containerColor) {
-    result.borderColor = containerColor
-    result.dotColor = containerColor
-    result.hoveredBackgroundColor = alphaColor(
-      containerColor,
-      theme.stateLayer.hoveredOpacity,
-    )
-    result.pressedBackgroundColor = alphaColor(
-      containerColor,
-      theme.stateLayer.pressedOpacity,
-    )
-  }
-
-  if (contentColor) {
-    result.borderColor = contentColor
-  }
-
-  return result
-}
-
-export function createStyles(
-  theme: MaterialTheme,
-  selected: boolean,
-  containerColor?: string,
-  contentColor?: string,
-) {
-  const colors = applyColorOverrides(
-    theme,
-    getColors(theme, selected),
-    containerColor,
-    contentColor,
-  )
-
-  const outerSize = 20
-  const innerSize = 10
-  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',
-    },
-    outer: {
-      width: outerSize,
-      height: outerSize,
-      borderRadius: outerSize / 2,
-      borderWidth: 2,
-      borderColor: colors.borderColor,
-      alignItems: 'center' as const,
-      justifyContent: 'center' as const,
-    },
-    disabledOuter: {
-      borderColor: colors.disabledBorderColor,
-    },
-    inner: {
-      width: innerSize,
-      height: innerSize,
-      borderRadius: innerSize / 2,
-      backgroundColor: colors.dotColor,
-    },
-    disabledInner: {
-      backgroundColor: colors.disabledDotColor,
-    },
-  })
-}

package/src/radio/types.ts

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

@@ -1,121 +0,0 @@
-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 { getMaterialCommunityIcons } from '@onlynative/utils'
-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 MaterialCommunityIcons = iconName
-    ? getMaterialCommunityIcons()
-    : null
-  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

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

package/src/switch/styles.ts

@@ -1,172 +0,0 @@
-import { StyleSheet } from 'react-native'
-import type { MaterialTheme } from '@onlynative/core'
-
-import { alphaColor, blendColor } from '@onlynative/utils'
-
-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: MaterialTheme, 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: MaterialTheme,
-  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: MaterialTheme,
-  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

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