@onlynative/components 0.1.0-alpha.0

package/package.json

@@ -0,0 +1,166 @@
+{
+  "name": "@onlynative/components",
+  "version": "0.1.0-alpha.0",
+  "description": "Material Design 3 UI components for React Native — Button, Card, Chip, TextField, and more.",
+  "private": false,
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./typography": {
+      "types": "./dist/typography/index.d.ts",
+      "react-native": "./src/typography/index.ts",
+      "default": "./dist/typography/index.js"
+    },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "react-native": "./src/layout/index.ts",
+      "default": "./dist/layout/index.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "react-native": "./src/button/index.ts",
+      "default": "./dist/button/index.js"
+    },
+    "./icon-button": {
+      "types": "./dist/icon-button/index.d.ts",
+      "react-native": "./src/icon-button/index.ts",
+      "default": "./dist/icon-button/index.js"
+    },
+    "./appbar": {
+      "types": "./dist/appbar/index.d.ts",
+      "react-native": "./src/appbar/index.ts",
+      "default": "./dist/appbar/index.js"
+    },
+    "./card": {
+      "types": "./dist/card/index.d.ts",
+      "react-native": "./src/card/index.ts",
+      "default": "./dist/card/index.js"
+    },
+    "./chip": {
+      "types": "./dist/chip/index.d.ts",
+      "react-native": "./src/chip/index.ts",
+      "default": "./dist/chip/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.ts",
+      "react-native": "./src/checkbox/index.ts",
+      "default": "./dist/checkbox/index.js"
+    },
+    "./radio": {
+      "types": "./dist/radio/index.d.ts",
+      "react-native": "./src/radio/index.ts",
+      "default": "./dist/radio/index.js"
+    },
+    "./switch": {
+      "types": "./dist/switch/index.d.ts",
+      "react-native": "./src/switch/index.ts",
+      "default": "./dist/switch/index.js"
+    },
+    "./text-field": {
+      "types": "./dist/text-field/index.d.ts",
+      "react-native": "./src/text-field/index.ts",
+      "default": "./dist/text-field/index.js"
+    },
+    "./list": {
+      "types": "./dist/list/index.d.ts",
+      "react-native": "./src/list/index.ts",
+      "default": "./dist/list/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "typography": [
+        "dist/typography/index.d.ts"
+      ],
+      "layout": [
+        "dist/layout/index.d.ts"
+      ],
+      "button": [
+        "dist/button/index.d.ts"
+      ],
+      "icon-button": [
+        "dist/icon-button/index.d.ts"
+      ],
+      "appbar": [
+        "dist/appbar/index.d.ts"
+      ],
+      "card": [
+        "dist/card/index.d.ts"
+      ],
+      "chip": [
+        "dist/chip/index.d.ts"
+      ],
+      "checkbox": [
+        "dist/checkbox/index.d.ts"
+      ],
+      "radio": [
+        "dist/radio/index.d.ts"
+      ],
+      "switch": [
+        "dist/switch/index.d.ts"
+      ],
+      "text-field": [
+        "dist/text-field/index.d.ts"
+      ],
+      "list": [
+        "dist/list/index.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/__tests__"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/onlynative/ui.git",
+    "directory": "packages/components"
+  },
+  "homepage": "https://github.com/onlynative/ui",
+  "keywords": [
+    "react-native",
+    "material-design-3",
+    "ui-components",
+    "md3",
+    "material-you"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/typography/index.ts src/layout/index.ts src/button/index.ts src/icon-button/index.ts src/appbar/index.ts src/card/index.ts src/chip/index.ts src/checkbox/index.ts src/radio/index.ts src/switch/index.ts src/text-field/index.ts src/list/index.ts --dts --format cjs --outDir dist --clean",
+    "typecheck": "tsc --noEmit",
+    "test": "jest --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": ">=14.0.0",
+    "@onlynative/core": ">=0.1.0-alpha.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "^0.81.5",
+    "@onlynative/core": "workspace:*",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.0",
+    "jest": "^29.7.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-test-renderer": "19.1.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/appbar/AppBar.tsx

@@ -0,0 +1,302 @@
+import { useCallback, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native'
+import { Platform, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { defaultTopAppBarTokens, useTheme } from '@onlynative/core'
+
+import { IconButton } from '../icon-button'
+import type { IconButtonProps } from '../icon-button'
+import { Typography } from '../typography'
+import type { TypographyVariant } from '../typography'
+import { selectRTL } from '../utils/rtl'
+import { createStyles } from './styles'
+import type { AppBarProps } from './types'
+
+type AppBarSize = 'small' | 'medium' | 'large'
+function getBackIcon(): IconButtonProps['icon'] {
+  if (Platform.OS === 'ios') {
+    return selectRTL('chevron-left', 'chevron-right')
+  }
+
+  return selectRTL('arrow-left', 'arrow-right')
+}
+
+const titleVariantBySize: Record<AppBarSize, TypographyVariant> = {
+  small: 'titleLarge',
+  medium: 'headlineSmall',
+  large: 'headlineMedium',
+}
+const APP_BAR_TITLE_TEXT_PROPS = {
+  numberOfLines: 1,
+  ellipsizeMode: 'tail',
+  accessibilityRole: 'header',
+} as const
+
+function resolveSize(variant: AppBarProps['variant']): AppBarSize {
+  if (variant === 'medium' || variant === 'large') {
+    return variant
+  }
+
+  return 'small'
+}
+
+function getSizeStyle(
+  styles: ReturnType<typeof createStyles>,
+  size: AppBarSize,
+) {
+  if (size === 'large') {
+    return styles.largeContainer
+  }
+
+  return styles.mediumContainer
+}
+
+function withTopInset(
+  enabled: boolean,
+  content: ReactNode,
+  style: StyleProp<ViewStyle>,
+) {
+  if (enabled) {
+    return (
+      <SafeAreaView edges={['top']} style={style}>
+        {content}
+      </SafeAreaView>
+    )
+  }
+
+  return <View style={style}>{content}</View>
+}
+
+function measureWidth(event: LayoutChangeEvent): number {
+  return Math.round(event.nativeEvent.layout.width)
+}
+
+export function AppBar({
+  title,
+  variant = 'small',
+  canGoBack = false,
+  onBackPress,
+  insetTop = false,
+  elevated = false,
+  leading,
+  trailing,
+  actions,
+  containerColor,
+  contentColor,
+  titleStyle,
+  style,
+}: AppBarProps) {
+  const theme = useTheme()
+  const topAppBar = theme.topAppBar ?? defaultTopAppBarTokens
+  const styles = useMemo(() => createStyles(theme), [theme])
+  const [leadingWidth, setLeadingWidth] = useState(0)
+  const [actionsWidth, setActionsWidth] = useState(0)
+  const titleColorStyle = useMemo(
+    () => ({ color: contentColor ?? theme.colors.onSurface }),
+    [contentColor, theme.colors.onSurface],
+  )
+  const size = resolveSize(variant)
+  const titleVariant = titleVariantBySize[size]
+  const isCenterAligned = variant === 'center-aligned'
+  const isExpanded = size !== 'small'
+  const titleStartInset =
+    topAppBar.horizontalPadding +
+    Math.max(topAppBar.titleStartInset, leadingWidth)
+  const compactTitleEndInset = topAppBar.horizontalPadding + actionsWidth
+  const centeredSideInset =
+    topAppBar.horizontalPadding + Math.max(leadingWidth, actionsWidth)
+  const expandedTitleInsetStyle = useMemo<ViewStyle>(
+    () => ({ paddingStart: titleStartInset }),
+    [titleStartInset],
+  )
+  const overlayTitleInsetStyle = useMemo<ViewStyle>(
+    () =>
+      isCenterAligned
+        ? { start: centeredSideInset, end: centeredSideInset }
+        : { start: titleStartInset, end: compactTitleEndInset },
+    [centeredSideInset, compactTitleEndInset, isCenterAligned, titleStartInset],
+  )
+
+  const leadingContent = useMemo(() => {
+    if (leading) {
+      return leading
+    }
+
+    if (!canGoBack) {
+      return null
+    }
+
+    return (
+      <View style={styles.iconFrame}>
+        <IconButton
+          icon={getBackIcon()}
+          size="medium"
+          variant="standard"
+          iconColor={contentColor ?? theme.colors.onSurface}
+          accessibilityLabel="Go back"
+          onPress={onBackPress}
+        />
+      </View>
+    )
+  }, [
+    canGoBack,
+    contentColor,
+    leading,
+    onBackPress,
+    styles.iconFrame,
+    theme.colors.onSurface,
+  ])
+
+  const actionsContent = useMemo(() => {
+    if (trailing) {
+      return trailing
+    }
+
+    if (!actions || actions.length === 0) {
+      return null
+    }
+
+    return (
+      <View style={styles.actionsRow}>
+        {actions.map((action, index) => (
+          <View
+            key={`${String(action.icon)}-${index}`}
+            style={styles.iconFrame}
+          >
+            <IconButton
+              icon={action.icon}
+              size="medium"
+              variant="standard"
+              iconColor={contentColor}
+              accessibilityLabel={action.accessibilityLabel}
+              onPress={action.onPress}
+              disabled={action.disabled}
+            />
+          </View>
+        ))}
+      </View>
+    )
+  }, [actions, contentColor, styles.actionsRow, styles.iconFrame, trailing])
+
+  const onLeadingLayout = useCallback((event: LayoutChangeEvent) => {
+    const nextWidth = measureWidth(event)
+
+    setLeadingWidth((currentWidth) => {
+      if (currentWidth === nextWidth) {
+        return currentWidth
+      }
+
+      return nextWidth
+    })
+  }, [])
+
+  const onActionsLayout = useCallback((event: LayoutChangeEvent) => {
+    const nextWidth = measureWidth(event)
+
+    setActionsWidth((currentWidth) => {
+      if (currentWidth === nextWidth) {
+        return currentWidth
+      }
+
+      return nextWidth
+    })
+  }, [])
+
+  const topRow = (
+    <View style={styles.topRow}>
+      <View
+        collapsable={false}
+        onLayout={onLeadingLayout}
+        style={styles.sideSlot}
+      >
+        {leadingContent}
+      </View>
+      <View style={styles.topRowSpacer} />
+      <View
+        collapsable={false}
+        onLayout={onActionsLayout}
+        style={styles.sideSlot}
+      >
+        {actionsContent}
+      </View>
+    </View>
+  )
+
+  const containerOverride = containerColor
+    ? ({ backgroundColor: containerColor } as ViewStyle)
+    : undefined
+  const rootStyle: StyleProp<ViewStyle> = [
+    styles.root,
+    elevated ? styles.elevatedRoot : undefined,
+    containerOverride,
+    style,
+  ]
+  const safeAreaStyle: StyleProp<ViewStyle> = [
+    styles.safeArea,
+    elevated ? styles.elevatedSafeArea : undefined,
+    containerOverride,
+  ]
+
+  if (isExpanded) {
+    const content = (
+      <View style={[styles.expandedContainer, getSizeStyle(styles, size)]}>
+        {topRow}
+        <View
+          style={[
+            styles.expandedTitleContainer,
+            size === 'large'
+              ? styles.largeTitlePadding
+              : styles.mediumTitlePadding,
+            expandedTitleInsetStyle,
+          ]}
+        >
+          <Typography
+            {...APP_BAR_TITLE_TEXT_PROPS}
+            variant={titleVariant}
+            style={[
+              styles.title,
+              titleColorStyle,
+              styles.startAlignedTitle,
+              titleStyle,
+            ]}
+          >
+            {title}
+          </Typography>
+        </View>
+      </View>
+    )
+
+    return (
+      <View style={rootStyle}>
+        {withTopInset(insetTop, content, safeAreaStyle)}
+      </View>
+    )
+  }
+
+  const content = (
+    <View style={styles.smallContainer}>
+      {topRow}
+      <View style={[styles.overlayTitleContainer, overlayTitleInsetStyle]}>
+        <Typography
+          {...APP_BAR_TITLE_TEXT_PROPS}
+          variant={titleVariant}
+          style={[
+            styles.title,
+            titleColorStyle,
+            isCenterAligned ? styles.centeredTitle : styles.startAlignedTitle,
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Typography>
+      </View>
+    </View>
+  )
+
+  return (
+    <View style={rootStyle}>
+      {withTopInset(insetTop, content, safeAreaStyle)}
+    </View>
+  )
+}

package/src/appbar/index.ts

@@ -0,0 +1,2 @@
+export { AppBar } from './AppBar'
+export type { AppBarAction, AppBarProps, AppBarVariant } from './types'

package/src/appbar/styles.ts

@@ -0,0 +1,92 @@
+import { StyleSheet } from 'react-native'
+import { defaultTopAppBarTokens } from '@onlynative/core'
+import type { Theme } from '@onlynative/core'
+
+export function createStyles(theme: Theme) {
+  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

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