@onlynative/components 0.1.0 → 0.1.1-alpha.1

package/src/card/styles.ts

@@ -1,150 +0,0 @@
-import { StyleSheet } from 'react-native'
-import type { MaterialTheme } from '@onlynative/core'
-
-import type { CardVariant } from './types'
-import { alphaColor, blendColor, elevationStyle } from '@onlynative/utils'
-
-interface VariantColors {
-  backgroundColor: string
-  borderColor: string
-  borderWidth: number
-  hoveredBackgroundColor: string
-  pressedBackgroundColor: string
-  disabledBackgroundColor: string
-  disabledBorderColor: string
-}
-
-function getVariantColors(theme: MaterialTheme, 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: MaterialTheme,
-  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: MaterialTheme,
-  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,
-    },
-  })
-}

package/src/card/types.ts

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

@@ -1,113 +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 { 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 MaterialCommunityIcons = isChecked
-    ? getMaterialCommunityIcons()
-    : null
-
-  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

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

package/src/checkbox/styles.ts

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

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

@@ -1,188 +0,0 @@
-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 { getMaterialCommunityIcons } from '@onlynative/utils'
-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 needsIcons =
-    Boolean(leadingIcon) || (variant === 'filter' && isSelected) || showCloseIcon
-  const MaterialCommunityIcons = needsIcons
-    ? getMaterialCommunityIcons()
-    : null
-
-  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

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