@onlynative/components 0.1.0 → 0.1.1-alpha.1

package/src/appbar/styles.ts

@@ -1,92 +0,0 @@
-import { StyleSheet } from 'react-native'
-import { defaultTopAppBarTokens } from '@onlynative/core'
-import type { MaterialTheme } from '@onlynative/core'
-
-export function createStyles(theme: MaterialTheme) {
-  const topAppBar = theme.topAppBar ?? defaultTopAppBarTokens
-
-  return StyleSheet.create({
-    root: {
-      backgroundColor: theme.colors.surface,
-    },
-    safeArea: {
-      backgroundColor: theme.colors.surface,
-    },
-    elevatedRoot: {
-      backgroundColor: theme.colors.surfaceContainer,
-    },
-    elevatedSafeArea: {
-      backgroundColor: theme.colors.surfaceContainer,
-    },
-    smallContainer: {
-      height: topAppBar.smallContainerHeight,
-      position: 'relative',
-    },
-    mediumContainer: {
-      height: topAppBar.mediumContainerHeight,
-    },
-    largeContainer: {
-      height: topAppBar.largeContainerHeight,
-    },
-    expandedContainer: {
-      position: 'relative',
-    },
-    topRow: {
-      height: topAppBar.topRowHeight,
-      paddingHorizontal: topAppBar.horizontalPadding,
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    expandedTitleContainer: {
-      flex: 1,
-      justifyContent: 'flex-end',
-      minWidth: 0,
-      paddingEnd: theme.spacing.md,
-      pointerEvents: 'none',
-    },
-    topRowSpacer: {
-      flex: 1,
-    },
-    sideSlot: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      minHeight: topAppBar.sideSlotMinHeight,
-    },
-    actionsRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    iconFrame: {
-      width: topAppBar.iconFrameSize,
-      height: topAppBar.iconFrameSize,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    overlayTitleContainer: {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      justifyContent: 'center',
-      minWidth: 0,
-      pointerEvents: 'none',
-    },
-    centeredTitle: {
-      textAlign: 'center',
-    },
-    startAlignedTitle: {
-      textAlign: 'auto',
-    },
-    mediumTitlePadding: {
-      paddingBottom: topAppBar.mediumTitleBottomPadding,
-    },
-    largeTitlePadding: {
-      paddingBottom: topAppBar.largeTitleBottomPadding,
-    },
-    title: {
-      flexShrink: 1,
-      maxWidth: '100%',
-      includeFontPadding: false,
-      textAlignVertical: 'center',
-    },
-  })
-}

package/src/appbar/types.ts

@@ -1,67 +0,0 @@
-import type { ReactNode } from 'react'
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
-import type { IconButtonProps } from '../icon-button'
-
-/** Size/layout variant of the AppBar. */
-export type AppBarVariant = 'small' | 'center-aligned' | 'medium' | 'large'
-
-/** A single action item rendered in the AppBar trailing slot. */
-export interface AppBarAction {
-  /** MaterialCommunityIcons icon name to render. */
-  icon: IconButtonProps['icon']
-  /** Accessibility label for screen readers (required). */
-  accessibilityLabel: string
-  /** Called when the action icon is pressed. */
-  onPress?: () => void
-  /**
-   * Disables the action icon.
-   * @default false
-   */
-  disabled?: boolean
-}
-
-export interface AppBarProps {
-  /** Title text displayed in the bar. */
-  title: string
-  /**
-   * Layout variant.
-   * @default 'small'
-   */
-  variant?: AppBarVariant
-  /**
-   * When `true`, renders a back button in the leading slot.
-   * @default false
-   */
-  canGoBack?: boolean
-  /** Called when the auto-rendered back button is pressed. */
-  onBackPress?: () => void
-  /**
-   * When `true`, wraps the bar in a SafeAreaView that handles the top inset.
-   * @default false
-   */
-  insetTop?: boolean
-  /**
-   * When `true`, adds shadow/elevation to indicate the bar is scrolled.
-   * @default false
-   */
-  elevated?: boolean
-  /** Custom leading content. When provided, overrides `canGoBack`. */
-  leading?: ReactNode
-  /** Custom trailing content. When provided, overrides `actions`. */
-  trailing?: ReactNode
-  /** Array of icon-button actions rendered in the trailing slot. */
-  actions?: AppBarAction[]
-  /**
-   * Override the container (background) color.
-   * Applied to both normal and elevated states.
-   */
-  containerColor?: string
-  /**
-   * Override the content (title and icon) color.
-   */
-  contentColor?: string
-  /** Additional style applied to the title text. */
-  titleStyle?: StyleProp<TextStyle>
-  /** Custom style applied to the root container. */
-  style?: StyleProp<ViewStyle>
-}

package/src/button/Button.tsx

@@ -1,133 +0,0 @@
-import { useMemo } from 'react'
-import { Platform, Pressable } from 'react-native'
-import { StyleSheet } from 'react-native'
-import { Text } 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 { ButtonProps } 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: ButtonProps['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 Button({
-  children,
-  style,
-  variant = 'filled',
-  leadingIcon,
-  trailingIcon,
-  iconSize = 18,
-  containerColor,
-  contentColor,
-  labelStyle: labelStyleOverride,
-  disabled = false,
-  ...props
-}: ButtonProps) {
-  const isDisabled = Boolean(disabled)
-  const hasLeading = Boolean(leadingIcon)
-  const hasTrailing = Boolean(trailingIcon)
-  const theme = useTheme()
-  const styles = useMemo(
-    () =>
-      createStyles(
-        theme,
-        variant,
-        hasLeading,
-        hasTrailing,
-        containerColor,
-        contentColor,
-      ),
-    [theme, variant, hasLeading, hasTrailing, containerColor, contentColor],
-  )
-
-  const MaterialCommunityIcons =
-    leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null
-
-  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],
-  )
-
-  return (
-    <Pressable
-      {...props}
-      accessibilityRole="button"
-      accessibilityState={{ disabled: isDisabled }}
-      hitSlop={Platform.OS === 'web' ? undefined : 4}
-      disabled={isDisabled}
-      style={resolveStyle(
-        styles.container,
-        styles.hoveredContainer,
-        styles.pressedContainer,
-        styles.disabledContainer,
-        isDisabled,
-        style,
-      )}
-    >
-      {leadingIcon ? (
-        <MaterialCommunityIcons
-          name={leadingIcon}
-          size={iconSize}
-          color={resolvedIconColor}
-          style={styles.leadingIcon}
-        />
-      ) : null}
-      <Text style={computedLabelStyle}>{children}</Text>
-      {trailingIcon ? (
-        <MaterialCommunityIcons
-          name={trailingIcon}
-          size={iconSize}
-          color={resolvedIconColor}
-          style={styles.trailingIcon}
-        />
-      ) : null}
-    </Pressable>
-  )
-}

package/src/button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button'
-export type { ButtonProps, ButtonVariant } from './types'

package/src/button/styles.ts

@@ -1,287 +0,0 @@
-import { StyleSheet } from 'react-native'
-import type { MaterialTheme } from '@onlynative/core'
-
-import type { ButtonVariant } 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: ButtonVariant): 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)
-
-  if (variant === 'outlined') {
-    return {
-      backgroundColor: 'transparent',
-      textColor: theme.colors.primary,
-      borderColor: theme.colors.outline,
-      borderWidth: 1,
-      hoveredBackgroundColor: alphaColor(
-        theme.colors.primary,
-        theme.stateLayer.hoveredOpacity,
-      ),
-      pressedBackgroundColor: alphaColor(
-        theme.colors.primary,
-        theme.stateLayer.pressedOpacity,
-      ),
-      disabledBackgroundColor: 'transparent',
-      disabledTextColor: disabledLabelColor,
-      disabledBorderColor: disabledOutlineColor,
-    }
-  }
-
-  if (variant === 'text') {
-    return {
-      backgroundColor: 'transparent',
-      textColor: theme.colors.primary,
-      borderColor: 'transparent',
-      borderWidth: 0,
-      hoveredBackgroundColor: alphaColor(
-        theme.colors.primary,
-        theme.stateLayer.hoveredOpacity,
-      ),
-      pressedBackgroundColor: alphaColor(
-        theme.colors.primary,
-        theme.stateLayer.pressedOpacity,
-      ),
-      disabledBackgroundColor: 'transparent',
-      disabledTextColor: disabledLabelColor,
-      disabledBorderColor: 'transparent',
-    }
-  }
-
-  if (variant === 'elevated') {
-    return {
-      backgroundColor: theme.colors.surfaceContainerLow,
-      textColor: theme.colors.primary,
-      borderColor: theme.colors.surfaceContainerLow,
-      borderWidth: 0,
-      hoveredBackgroundColor: blendColor(
-        theme.colors.surfaceContainerLow,
-        theme.colors.primary,
-        theme.stateLayer.hoveredOpacity,
-      ),
-      pressedBackgroundColor: blendColor(
-        theme.colors.surfaceContainerLow,
-        theme.colors.primary,
-        theme.stateLayer.pressedOpacity,
-      ),
-      disabledBackgroundColor: disabledContainerColor,
-      disabledTextColor: disabledLabelColor,
-      disabledBorderColor: disabledContainerColor,
-    }
-  }
-
-  if (variant === 'tonal') {
-    return {
-      backgroundColor: theme.colors.secondaryContainer,
-      textColor: theme.colors.onSecondaryContainer,
-      borderColor: theme.colors.secondaryContainer,
-      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: disabledContainerColor,
-    }
-  }
-
-  // filled (default)
-  return {
-    backgroundColor: theme.colors.primary,
-    textColor: theme.colors.onPrimary,
-    borderColor: theme.colors.primary,
-    borderWidth: 0,
-    hoveredBackgroundColor: blendColor(
-      theme.colors.primary,
-      theme.colors.onPrimary,
-      theme.stateLayer.hoveredOpacity,
-    ),
-    pressedBackgroundColor: blendColor(
-      theme.colors.primary,
-      theme.colors.onPrimary,
-      theme.stateLayer.pressedOpacity,
-    ),
-    disabledBackgroundColor: disabledContainerColor,
-    disabledTextColor: disabledLabelColor,
-    disabledBorderColor: disabledContainerColor,
-  }
-}
-
-function getHorizontalPadding(
-  theme: MaterialTheme,
-  variant: ButtonVariant,
-  hasLeadingIcon: boolean,
-  hasTrailingIcon: boolean,
-): { paddingStart: number; paddingEnd: number } {
-  if (variant === 'text') {
-    // M3: text button uses 12dp base, opposite side of icon gets 16dp
-    return {
-      paddingStart: hasLeadingIcon
-        ? 12
-        : hasTrailingIcon
-          ? theme.spacing.md
-          : 12,
-      paddingEnd: hasTrailingIcon ? 12 : hasLeadingIcon ? theme.spacing.md : 12,
-    }
-  }
-
-  // M3: filled/elevated/tonal/outlined use 24dp base, icon side gets 16dp
-  return {
-    paddingStart: hasLeadingIcon ? theme.spacing.md : theme.spacing.lg,
-    paddingEnd: hasTrailingIcon ? theme.spacing.md : theme.spacing.lg,
-  }
-}
-
-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: ButtonVariant,
-  hasLeadingIcon: boolean,
-  hasTrailingIcon: boolean,
-  containerColor?: string,
-  contentColor?: string,
-) {
-  const baseColors = getVariantColors(theme, variant)
-  const colors = applyColorOverrides(
-    theme,
-    baseColors,
-    containerColor,
-    contentColor,
-  )
-  const labelStyle = theme.typography.labelLarge
-  const padding = getHorizontalPadding(
-    theme,
-    variant,
-    hasLeadingIcon,
-    hasTrailingIcon,
-  )
-  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: {
-      alignSelf: 'flex-start',
-      alignItems: 'center',
-      flexDirection: 'row',
-      justifyContent: 'center',
-      minWidth: 58,
-      minHeight: 40,
-      paddingStart: padding.paddingStart,
-      paddingEnd: padding.paddingEnd,
-      paddingVertical: 10,
-      borderRadius: theme.shape.cornerFull,
-      backgroundColor: colors.backgroundColor,
-      borderColor: colors.borderColor,
-      borderWidth: colors.borderWidth,
-      cursor: 'pointer',
-      ...baseElevation,
-    },
-    hoveredContainer: {
-      backgroundColor: colors.hoveredBackgroundColor,
-      ...(variant === 'elevated' ? 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,
-    },
-    leadingIcon: {
-      marginEnd: theme.spacing.sm,
-    },
-    trailingIcon: {
-      marginStart: theme.spacing.sm,
-    },
-    disabledLabel: {
-      color: colors.disabledTextColor,
-    },
-  })
-}

package/src/button/types.ts

@@ -1,42 +0,0 @@
-import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
-import type { ComponentProps } from 'react'
-import type { PressableProps, StyleProp, TextStyle } from 'react-native'
-
-/** Visual style variant of the button following Material Design 3 roles. */
-export type ButtonVariant =
-  | 'filled'
-  | 'elevated'
-  | 'outlined'
-  | 'text'
-  | 'tonal'
-
-export interface ButtonProps extends Omit<PressableProps, 'children'> {
-  /** Text label rendered inside the button. */
-  children: string
-  /**
-   * Visual variant. Controls background, border, and text color.
-   * @default 'filled'
-   */
-  variant?: ButtonVariant
-  /** Name of a MaterialCommunityIcons icon to show before the label. */
-  leadingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
-  /** Name of a MaterialCommunityIcons icon to show after the label. */
-  trailingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
-  /**
-   * Size of leading and trailing icons in dp.
-   * @default 18
-   */
-  iconSize?: number
-  /**
-   * 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/card/Card.tsx

@@ -1,69 +0,0 @@
-import { useMemo } from 'react'
-import { Platform, Pressable, View } from 'react-native'
-import type { StyleProp, ViewStyle } from 'react-native'
-import { useTheme } from '@onlynative/core'
-
-import { createStyles } from './styles'
-import type { CardProps } from './types'
-
-interface PressableState {
-  pressed: boolean
-  hovered?: boolean
-}
-
-export function Card({
-  children,
-  style,
-  variant = 'elevated',
-  onPress,
-  disabled = false,
-  containerColor,
-  ...props
-}: CardProps) {
-  const isDisabled = Boolean(disabled)
-  const isInteractive = onPress !== undefined
-  const theme = useTheme()
-  const styles = useMemo(
-    () => createStyles(theme, variant, containerColor),
-    [theme, variant, containerColor],
-  )
-
-  if (!isInteractive) {
-    return (
-      <View {...props} style={[styles.container, style]}>
-        {children}
-      </View>
-    )
-  }
-
-  const resolvedStyle = (state: PressableState): StyleProp<ViewStyle> => [
-    styles.container,
-    styles.interactiveContainer,
-    state.hovered && !state.pressed && !isDisabled
-      ? styles.hoveredContainer
-      : undefined,
-    state.pressed && !isDisabled ? styles.pressedContainer : undefined,
-    isDisabled ? styles.disabledContainer : undefined,
-    typeof style === 'function'
-      ? (style as (state: PressableState) => ViewStyle)(state)
-      : style,
-  ]
-
-  return (
-    <Pressable
-      {...props}
-      role="button"
-      accessibilityState={{ disabled: isDisabled }}
-      hitSlop={Platform.OS === 'web' ? undefined : 4}
-      disabled={isDisabled}
-      onPress={onPress}
-      style={resolvedStyle}
-    >
-      {isDisabled ? (
-        <View style={styles.disabledContent}>{children}</View>
-      ) : (
-        children
-      )}
-    </Pressable>
-  )
-}

package/src/card/index.ts

@@ -1,2 +0,0 @@
-export { Card } from './Card'
-export type { CardProps, CardVariant } from './types'