@onlynative/components 0.1.0-alpha.0

package/src/layout/types.ts

@@ -0,0 +1,82 @@
+import type { FlexAlignType, ViewProps } from 'react-native'
+import type { Theme } from '@onlynative/core'
+
+/** A theme spacing token name or a raw numeric value in dp. */
+export type SpacingValue = keyof Theme['spacing'] | number
+
+export interface BoxProps extends ViewProps {
+  /** Padding on all sides */
+  p?: SpacingValue
+  /** Horizontal padding (paddingStart + paddingEnd) */
+  px?: SpacingValue
+  /** Vertical padding (paddingTop + paddingBottom) */
+  py?: SpacingValue
+  /** Padding top */
+  pt?: SpacingValue
+  /** Padding bottom */
+  pb?: SpacingValue
+  /** Padding start (left in LTR, right in RTL) */
+  ps?: SpacingValue
+  /** Padding end (right in LTR, left in RTL) */
+  pe?: SpacingValue
+  /** Margin on all sides */
+  m?: SpacingValue
+  /** Horizontal margin (marginStart + marginEnd) */
+  mx?: SpacingValue
+  /** Vertical margin (marginTop + marginBottom) */
+  my?: SpacingValue
+  /** Margin top */
+  mt?: SpacingValue
+  /** Margin bottom */
+  mb?: SpacingValue
+  /** Margin start */
+  ms?: SpacingValue
+  /** Margin end */
+  me?: SpacingValue
+  /** Gap between children */
+  gap?: SpacingValue
+  /** Row gap between children */
+  rowGap?: SpacingValue
+  /** Column gap between children */
+  columnGap?: SpacingValue
+  /** Flex value */
+  flex?: number
+  /** Align items along the cross axis */
+  align?: FlexAlignType
+  /** Justify content along the main axis */
+  justify?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+  /** Background color */
+  bg?: string
+}
+
+export interface RowProps extends BoxProps {
+  /**
+   * Whether children should wrap to the next line when they overflow.
+   * @default false
+   */
+  wrap?: boolean
+  /**
+   * Reverses the layout direction (`row-reverse`).
+   * @default false
+   */
+  inverted?: boolean
+}
+
+export interface ColumnProps extends BoxProps {
+  /**
+   * Reverses the layout direction (`column-reverse`).
+   * @default false
+   */
+  inverted?: boolean
+}
+
+export interface GridProps extends RowProps {
+  /** Number of equal-width columns. */
+  columns: number
+}

package/src/list/List.tsx

@@ -0,0 +1,17 @@
+import { useMemo } from 'react'
+import { View } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { createListStyles } from './styles'
+import type { ListProps } from './types'
+
+export function List({ children, style, ...props }: ListProps) {
+  const theme = useTheme()
+  const styles = useMemo(() => createListStyles(theme), [theme])
+
+  return (
+    <View {...props} style={[styles.container, style]}>
+      {children}
+    </View>
+  )
+}

package/src/list/ListDivider.tsx

@@ -0,0 +1,20 @@
+import { useMemo } from 'react'
+import { View } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { createDividerStyles } from './styles'
+import type { ListDividerProps } from './types'
+
+export function ListDivider({
+  inset = false,
+  style,
+  ...props
+}: ListDividerProps) {
+  const theme = useTheme()
+  const styles = useMemo(
+    () => createDividerStyles(theme, inset),
+    [theme, inset],
+  )
+
+  return <View {...props} style={[styles.divider, style]} />
+}

package/src/list/ListItem.tsx

@@ -0,0 +1,128 @@
+import { useMemo } from 'react'
+import { Platform, Pressable, Text, View } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { createListItemStyles } from './styles'
+import type { ListItemLines, ListItemProps } from './types'
+
+interface PressableState {
+  pressed: boolean
+  hovered?: boolean
+}
+
+function getLines(
+  supportingText?: string,
+  overlineText?: string,
+  supportingTextNumberOfLines?: number,
+): ListItemLines {
+  if (
+    (supportingText && overlineText) ||
+    (supportingText && supportingTextNumberOfLines && supportingTextNumberOfLines > 1)
+  ) {
+    return 3
+  }
+  if (supportingText || overlineText) return 2
+  return 1
+}
+
+export function ListItem({
+  headlineText,
+  supportingText,
+  overlineText,
+  trailingSupportingText,
+  leadingContent,
+  trailingContent,
+  onPress,
+  disabled = false,
+  containerColor,
+  supportingTextNumberOfLines = 1,
+  style,
+  ...props
+}: ListItemProps) {
+  const isDisabled = Boolean(disabled)
+  const isInteractive = onPress !== undefined
+  const theme = useTheme()
+  const lines = getLines(supportingText, overlineText, supportingTextNumberOfLines)
+  const styles = useMemo(
+    () => createListItemStyles(theme, lines, containerColor),
+    [theme, lines, containerColor],
+  )
+
+  const content = (
+    <>
+      {leadingContent != null && (
+        <View style={styles.leadingContent}>{leadingContent}</View>
+      )}
+      <View style={styles.textBlock}>
+        {overlineText != null && (
+          <Text style={styles.overlineText} numberOfLines={1}>
+            {overlineText}
+          </Text>
+        )}
+        <Text style={styles.headlineText} numberOfLines={1}>
+          {headlineText}
+        </Text>
+        {supportingText != null && (
+          <Text
+            style={styles.supportingText}
+            numberOfLines={supportingTextNumberOfLines}
+          >
+            {supportingText}
+          </Text>
+        )}
+      </View>
+      {(trailingContent != null || trailingSupportingText != null) && (
+        <View style={styles.trailingBlock}>
+          {trailingSupportingText != null && (
+            <Text style={styles.trailingSupportingText} numberOfLines={1}>
+              {trailingSupportingText}
+            </Text>
+          )}
+          {trailingContent}
+        </View>
+      )}
+    </>
+  )
+
+  if (!isInteractive) {
+    return (
+      <View {...props} style={[styles.container, style]}>
+        {content}
+      </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.disabledContentWrapper}>
+          {content}
+        </View>
+      ) : (
+        content
+      )}
+    </Pressable>
+  )
+}

package/src/list/index.ts

@@ -0,0 +1,9 @@
+export { List } from './List'
+export { ListItem } from './ListItem'
+export { ListDivider } from './ListDivider'
+export type {
+  ListProps,
+  ListItemLines,
+  ListItemProps,
+  ListDividerProps,
+} from './types'

package/src/list/styles.ts

@@ -0,0 +1,132 @@
+import { StyleSheet } from 'react-native'
+import type { Theme } from '@onlynative/core'
+
+import type { ListItemLines } from './types'
+import { alphaColor, blendColor } from '../utils/color'
+
+const ITEM_PADDING_VERTICAL = 12
+const INSET_START = 56
+
+const MIN_HEIGHT: Record<ListItemLines, number> = {
+  1: 56,
+  2: 72,
+  3: 88,
+}
+
+export function createListStyles(theme: Theme) {
+  return StyleSheet.create({
+    container: {
+      paddingVertical: theme.spacing.sm,
+    },
+  })
+}
+
+interface ItemColors {
+  backgroundColor: string
+  hoveredBackgroundColor: string
+  pressedBackgroundColor: string
+}
+
+function getItemColors(theme: Theme, containerColor?: string): ItemColors {
+  const base = containerColor ?? 'transparent'
+
+  if (containerColor) {
+    return {
+      backgroundColor: containerColor,
+      hoveredBackgroundColor: blendColor(
+        containerColor,
+        theme.colors.onSurface,
+        theme.stateLayer.hoveredOpacity,
+      ),
+      pressedBackgroundColor: blendColor(
+        containerColor,
+        theme.colors.onSurface,
+        theme.stateLayer.pressedOpacity,
+      ),
+    }
+  }
+
+  return {
+    backgroundColor: base,
+    hoveredBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity,
+    ),
+    pressedBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity,
+    ),
+  }
+}
+
+export function createListItemStyles(
+  theme: Theme,
+  lines: ListItemLines,
+  containerColor?: string,
+) {
+  const colors = getItemColors(theme, containerColor)
+
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: lines === 3 ? 'flex-start' : 'center',
+      minHeight: MIN_HEIGHT[lines],
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: ITEM_PADDING_VERTICAL,
+      backgroundColor: colors.backgroundColor,
+    },
+    interactiveContainer: {
+      cursor: 'pointer',
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor,
+    },
+    pressedContainer: {
+      backgroundColor: colors.pressedBackgroundColor,
+    },
+    disabledContainer: {
+      cursor: 'auto',
+    },
+    disabledContentWrapper: {
+      flexDirection: 'row',
+      flex: 1,
+      opacity: theme.stateLayer.disabledOpacity,
+    },
+    leadingContent: {
+      marginEnd: theme.spacing.md,
+    },
+    textBlock: {
+      flex: 1,
+    },
+    overlineText: {
+      ...theme.typography.labelSmall,
+      color: theme.colors.onSurfaceVariant,
+    },
+    headlineText: {
+      ...theme.typography.bodyLarge,
+      color: theme.colors.onSurface,
+    },
+    supportingText: {
+      ...theme.typography.bodyMedium,
+      color: theme.colors.onSurfaceVariant,
+    },
+    trailingBlock: {
+      marginStart: theme.spacing.md,
+      alignItems: 'flex-end',
+    },
+    trailingSupportingText: {
+      ...theme.typography.labelSmall,
+      color: theme.colors.onSurfaceVariant,
+    },
+  })
+}
+
+export function createDividerStyles(theme: Theme, inset: boolean) {
+  return StyleSheet.create({
+    divider: {
+      height: 1,
+      backgroundColor: theme.colors.outlineVariant,
+      ...(inset ? { marginStart: INSET_START } : undefined),
+    },
+  })
+}

package/src/list/types.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react'
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native'
+
+export interface ListProps extends ViewProps {
+  /** Content rendered inside the list container. */
+  children: ReactNode
+  style?: StyleProp<ViewStyle>
+}
+
+/** Number of text lines the item displays, used to determine minimum height. */
+export type ListItemLines = 1 | 2 | 3
+
+export interface ListItemProps extends ViewProps {
+  /** Primary text displayed on the list item. */
+  headlineText: string
+  /** Secondary text displayed below the headline. */
+  supportingText?: string
+  /** Text displayed above the headline (e.g. category label). */
+  overlineText?: string
+  /** Short text displayed at the trailing edge (e.g. "100+", timestamp). */
+  trailingSupportingText?: string
+  /** Content rendered before the text block (icon, avatar, image, checkbox). */
+  leadingContent?: ReactNode
+  /** Content rendered after the text block (icon, switch, checkbox). */
+  trailingContent?: ReactNode
+  /** When provided, the item 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
+  /**
+   * Maximum number of lines for supportingText before truncating.
+   * @default 1
+   */
+  supportingTextNumberOfLines?: number
+  style?: StyleProp<ViewStyle>
+}
+
+export interface ListDividerProps extends ViewProps {
+  /**
+   * When true, adds a leading inset so the divider aligns with text
+   * that follows a leading icon (56dp from the start edge).
+   * @default false
+   */
+  inset?: boolean
+  style?: StyleProp<ViewStyle>
+}

package/src/radio/Radio.tsx

@@ -0,0 +1,103 @@
+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 { RadioProps } 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: RadioProps['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 Radio({
+  style,
+  value = false,
+  onValueChange,
+  containerColor,
+  contentColor,
+  disabled = false,
+  ...props
+}: RadioProps) {
+  const isDisabled = Boolean(disabled)
+  const isSelected = Boolean(value)
+
+  const theme = useTheme()
+  const styles = useMemo(
+    () => createStyles(theme, isSelected, containerColor, contentColor),
+    [theme, isSelected, containerColor, contentColor],
+  )
+
+  const handlePress = () => {
+    if (!isDisabled) {
+      onValueChange?.(!isSelected)
+    }
+  }
+
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole="radio"
+      accessibilityState={{
+        disabled: isDisabled,
+        checked: isSelected,
+      }}
+      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.outer, isDisabled ? styles.disabledOuter : undefined]}
+      >
+        {isSelected ? (
+          <View
+            style={[
+              styles.inner,
+              isDisabled ? styles.disabledInner : undefined,
+            ]}
+          />
+        ) : null}
+      </View>
+    </Pressable>
+  )
+}

package/src/radio/index.ts

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

package/src/radio/styles.ts

@@ -0,0 +1,139 @@
+import { StyleSheet } from 'react-native'
+import type { Theme } from '@onlynative/core'
+
+import { alphaColor, blendColor } from '../utils/color'
+
+interface RadioColors {
+  borderColor: string
+  dotColor: string
+  hoveredBackgroundColor: string
+  pressedBackgroundColor: string
+  disabledBorderColor: string
+  disabledDotColor: string
+}
+
+function getColors(theme: Theme, 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: Theme,
+  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: Theme,
+  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,
+    },
+  })
+}