@onlynative/components 0.1.0 → 0.1.1-alpha.1

package/src/chip/styles.ts

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

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

@@ -1,362 +0,0 @@
-import { useMemo } from 'react'
-import { Pressable } from 'react-native'
-import type { StyleProp, ViewStyle } from 'react-native'
-import { useTheme } from '@onlynative/core'
-
-import {
-  alphaColor,
-  blendColor,
-  getMaterialCommunityIcons,
-} from '@onlynative/utils'
-import { createStyles } from './styles'
-import type {
-  IconButtonProps,
-  IconButtonSize,
-  IconButtonVariant,
-} from './types'
-
-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 MaterialCommunityIcons = getMaterialCommunityIcons()
-  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

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