@onlynative/components 0.1.0-alpha.0

package/src/icon-button/styles.ts

@@ -0,0 +1,259 @@
+import { StyleSheet } from 'react-native'
+import type { Theme } from '@onlynative/core'
+import { alphaColor, blendColor } from '../utils/color'
+
+export function createStyles(theme: Theme) {
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12)
+  const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest
+
+  return StyleSheet.create({
+    container: {
+      borderRadius: theme.shape.cornerFull,
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+    },
+    sizeSmall: {
+      width: 32,
+      height: 32,
+    },
+    sizeMedium: {
+      width: 40,
+      height: 40,
+    },
+    sizeLarge: {
+      width: 48,
+      height: 48,
+    },
+    colorFilled: {
+      backgroundColor: theme.colors.primary,
+      borderColor: theme.colors.primary,
+      borderWidth: 0,
+    },
+    colorFilledToggleUnselected: {
+      backgroundColor: toggleUnselectedContainerColor,
+      borderColor: toggleUnselectedContainerColor,
+      borderWidth: 0,
+    },
+    colorFilledToggleSelected: {
+      backgroundColor: theme.colors.primary,
+      borderColor: theme.colors.primary,
+      borderWidth: 0,
+    },
+    colorTonal: {
+      backgroundColor: theme.colors.secondaryContainer,
+      borderColor: theme.colors.secondaryContainer,
+      borderWidth: 0,
+    },
+    colorTonalToggleUnselected: {
+      backgroundColor: toggleUnselectedContainerColor,
+      borderColor: toggleUnselectedContainerColor,
+      borderWidth: 0,
+    },
+    colorTonalToggleSelected: {
+      backgroundColor: theme.colors.secondaryContainer,
+      borderColor: theme.colors.secondaryContainer,
+      borderWidth: 0,
+    },
+    colorOutlined: {
+      borderColor: theme.colors.outline,
+      borderWidth: 1,
+    },
+    colorOutlinedToggleSelected: {
+      backgroundColor: theme.colors.inverseSurface,
+      borderColor: theme.colors.inverseSurface,
+      borderWidth: 0,
+    },
+    colorStandard: {
+      borderWidth: 0,
+    },
+    colorStandardToggleSelected: {
+      borderWidth: 0,
+    },
+
+    // Hover states (M3: 8% state layer)
+    hoveredFilled: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredFilledToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredFilledToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredTonal: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredTonalToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredTonalToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredOutlined: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredOutlinedToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredOutlinedToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.inverseSurface,
+        theme.colors.inverseOnSurface,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredStandard: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredStandardToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+    hoveredStandardToggleSelected: {
+      backgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity,
+      ),
+    },
+
+    // Pressed states (M3: 12% state layer)
+    pressedFilled: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedFilledToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedFilledToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedTonal: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedTonalToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedTonalToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedOutlined: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedOutlinedToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedOutlinedToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.inverseSurface,
+        theme.colors.inverseOnSurface,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedStandard: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedStandardToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+    pressedStandardToggleSelected: {
+      backgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity,
+      ),
+    },
+
+    // Disabled states
+    disabledFilled: {
+      backgroundColor: disabledContainerColor,
+      borderColor: disabledContainerColor,
+      cursor: 'auto',
+    },
+    disabledTonal: {
+      backgroundColor: disabledContainerColor,
+      borderColor: disabledContainerColor,
+      cursor: 'auto',
+    },
+    disabledOutlined: {
+      backgroundColor: 'transparent',
+      borderColor: disabledOutlineColor,
+      cursor: 'auto',
+    },
+    disabledStandard: {
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+      cursor: 'auto',
+    },
+  })
+}

package/src/icon-button/types.ts

@@ -0,0 +1,55 @@
+import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import type { ComponentProps } from 'react'
+import type { PressableProps } from 'react-native'
+
+/** Visual fill style of the icon button. */
+export type IconButtonVariant = 'filled' | 'tonal' | 'outlined' | 'standard'
+
+/** Touch target size of the icon button. */
+export type IconButtonSize = 'small' | 'medium' | 'large'
+
+export interface IconButtonProps
+  extends Omit<
+    PressableProps,
+    'children' | 'onPress' | 'style' | 'accessibilityLabel'
+  > {
+  /** MaterialCommunityIcons icon name to display. */
+  icon: ComponentProps<typeof MaterialCommunityIcons>['name']
+  /** Icon to display when `selected` is `true` (toggle mode). */
+  selectedIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
+  /** Overrides the automatic icon color derived from the variant and state. */
+  iconColor?: string
+  /**
+   * Override the content (icon) color.
+   * Takes precedence over `iconColor` when both are provided.
+   */
+  contentColor?: string
+  /**
+   * Override the container (background) color.
+   * State-layer colors (hover, press) are derived automatically.
+   */
+  containerColor?: string
+  /** Custom style applied to the root container. */
+  style?: PressableProps['style']
+  /** Called when the button is pressed. */
+  onPress?: () => void
+  /**
+   * Disables the button.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Visual style variant.
+   * @default 'filled'
+   */
+  variant?: IconButtonVariant
+  /** Enables toggle mode. The button changes appearance based on selected/unselected state. */
+  selected?: boolean
+  /**
+   * Physical size of the touch target and icon container.
+   * @default 'medium'
+   */
+  size?: IconButtonSize
+  /** Required — icon-only buttons must have a label for screen readers. */
+  accessibilityLabel: string
+}

package/src/index.ts

@@ -0,0 +1,51 @@
+export { Typography } from './typography'
+export type { TypographyProps, TypographyVariant } from './typography'
+
+export { Layout, Box, Column, Grid, Row } from './layout'
+export type {
+  LayoutProps,
+  BoxProps,
+  ColumnProps,
+  GridProps,
+  RowProps,
+  SpacingValue,
+} from './layout'
+
+export { Button } from './button'
+export type { ButtonProps, ButtonVariant } from './button'
+
+export { IconButton } from './icon-button'
+export type {
+  IconButtonProps,
+  IconButtonSize,
+  IconButtonVariant,
+} from './icon-button'
+
+export { AppBar } from './appbar'
+export type { AppBarAction, AppBarProps, AppBarVariant } from './appbar'
+
+export { Card } from './card'
+export type { CardProps, CardVariant } from './card'
+
+export { Chip } from './chip'
+export type { ChipProps, ChipVariant } from './chip'
+
+export { Checkbox } from './checkbox'
+export type { CheckboxProps } from './checkbox'
+
+export { Radio } from './radio'
+export type { RadioProps } from './radio'
+
+export { Switch } from './switch'
+export type { SwitchProps } from './switch'
+
+export { TextField } from './text-field'
+export type { TextFieldProps, TextFieldVariant } from './text-field'
+
+export { List, ListItem, ListDivider } from './list'
+export type {
+  ListProps,
+  ListItemLines,
+  ListItemProps,
+  ListDividerProps,
+} from './list'

package/src/layout/Box.tsx

@@ -0,0 +1,99 @@
+import { useMemo } from 'react'
+import type { ViewStyle } from 'react-native'
+import { View } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import type { BoxProps, SpacingValue } from './types'
+import { resolveSpacing } from './resolveSpacing'
+
+export function Box({
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  ps,
+  pe,
+  m,
+  mx,
+  my,
+  mt,
+  mb,
+  ms,
+  me,
+  gap,
+  rowGap,
+  columnGap,
+  flex,
+  align,
+  justify,
+  bg,
+  style,
+  ...viewProps
+}: BoxProps) {
+  const { spacing } = useTheme()
+
+  const layoutStyle = useMemo<ViewStyle>(() => {
+    const s = (v: SpacingValue | undefined) => resolveSpacing(spacing, v)
+    return {
+      ...(p !== undefined && { padding: s(p) }),
+      ...(px !== undefined && {
+        paddingStart: s(px),
+        paddingEnd: s(px),
+      }),
+      ...(py !== undefined && {
+        paddingTop: s(py),
+        paddingBottom: s(py),
+      }),
+      ...(pt !== undefined && { paddingTop: s(pt) }),
+      ...(pb !== undefined && { paddingBottom: s(pb) }),
+      ...(ps !== undefined && { paddingStart: s(ps) }),
+      ...(pe !== undefined && { paddingEnd: s(pe) }),
+      ...(m !== undefined && { margin: s(m) }),
+      ...(mx !== undefined && {
+        marginStart: s(mx),
+        marginEnd: s(mx),
+      }),
+      ...(my !== undefined && {
+        marginTop: s(my),
+        marginBottom: s(my),
+      }),
+      ...(mt !== undefined && { marginTop: s(mt) }),
+      ...(mb !== undefined && { marginBottom: s(mb) }),
+      ...(ms !== undefined && { marginStart: s(ms) }),
+      ...(me !== undefined && { marginEnd: s(me) }),
+      ...(gap !== undefined && { gap: s(gap) }),
+      ...(rowGap !== undefined && { rowGap: s(rowGap) }),
+      ...(columnGap !== undefined && { columnGap: s(columnGap) }),
+      ...(flex !== undefined && { flex }),
+      ...(align !== undefined && { alignItems: align }),
+      ...(justify !== undefined && { justifyContent: justify }),
+      ...(bg !== undefined && { backgroundColor: bg }),
+    }
+  }, [
+    spacing,
+    p,
+    px,
+    py,
+    pt,
+    pb,
+    ps,
+    pe,
+    m,
+    mx,
+    my,
+    mt,
+    mb,
+    ms,
+    me,
+    gap,
+    rowGap,
+    columnGap,
+    flex,
+    align,
+    justify,
+    bg,
+  ])
+
+  return <View {...viewProps} style={[layoutStyle, style]} />
+}

package/src/layout/Column.tsx

@@ -0,0 +1,16 @@
+import { useMemo } from 'react'
+import type { ViewStyle } from 'react-native'
+
+import { Box } from './Box'
+import type { ColumnProps } from './types'
+
+export function Column({ inverted = false, style, ...boxProps }: ColumnProps) {
+  const directionStyle = useMemo<ViewStyle>(
+    () => ({
+      flexDirection: inverted ? 'column-reverse' : 'column',
+    }),
+    [inverted],
+  )
+
+  return <Box {...boxProps} style={[directionStyle, style]} />
+}

package/src/layout/Grid.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react'
+import type { ViewStyle } from 'react-native'
+import { View } from 'react-native'
+import { useTheme } from '@onlynative/core'
+
+import { Row } from './Row'
+import { resolveSpacing } from './resolveSpacing'
+import type { GridProps } from './types'
+
+export function Grid({
+  columns,
+  gap,
+  columnGap,
+  rowGap,
+  children,
+  style,
+  ...rowProps
+}: GridProps) {
+  const { spacing } = useTheme()
+  const resolvedColumnGap = resolveSpacing(spacing, columnGap ?? gap)
+  const resolvedRowGap = resolveSpacing(spacing, rowGap ?? gap)
+  const halfGap = resolvedColumnGap ? resolvedColumnGap / 2 : 0
+
+  const cellStyle = useMemo<ViewStyle>(
+    () => ({
+      flexBasis: `${100 / columns}%` as unknown as number,
+      flexShrink: 1,
+      paddingLeft: halfGap,
+      paddingRight: halfGap,
+    }),
+    [columns, halfGap],
+  )
+
+  const rowStyle = useMemo<ViewStyle>(
+    () => ({
+      marginLeft: -halfGap,
+      marginRight: -halfGap,
+    }),
+    [halfGap],
+  )
+
+  return (
+    <Row wrap rowGap={resolvedRowGap} {...rowProps} style={[rowStyle, style]}>
+      {React.Children.map(children, (child) =>
+        child != null ? <View style={cellStyle}>{child}</View> : null,
+      )}
+    </Row>
+  )
+}

package/src/layout/Layout.tsx

@@ -0,0 +1,81 @@
+import { useMemo } from 'react'
+import type { PropsWithChildren } from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { StyleSheet } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import type { Edge } from 'react-native-safe-area-context'
+import { useTheme } from '@onlynative/core'
+
+export interface LayoutProps extends PropsWithChildren {
+  /**
+   * When `true`, removes all safe area insets for full-screen layout.
+   * @default false
+   */
+  immersive?: boolean
+  /** Explicit set of safe-area edges to apply. Overrides `immersive` when provided. */
+  edges?: Edge[]
+  /** Additional styles applied to the SafeAreaView container. */
+  style?: StyleProp<ViewStyle>
+}
+
+const defaultEdges: Edge[] = ['bottom']
+
+function resolveEdges(immersive?: boolean, edges?: Edge[]): Edge[] {
+  if (edges) {
+    return edges
+  }
+
+  if (immersive) {
+    return []
+  }
+
+  return defaultEdges
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+})
+
+function removeBackgroundColor(style?: StyleProp<ViewStyle>) {
+  if (!style) {
+    return undefined
+  }
+
+  const flattenedStyle = StyleSheet.flatten(style)
+
+  if (!flattenedStyle || flattenedStyle.backgroundColor === undefined) {
+    return style
+  }
+
+  const styleWithoutBackground = { ...flattenedStyle }
+  delete styleWithoutBackground.backgroundColor
+
+  return styleWithoutBackground
+}
+
+export function Layout({ immersive, edges, children, style }: LayoutProps) {
+  const theme = useTheme()
+  const themeBackgroundStyle = useMemo(
+    () => ({ backgroundColor: theme.colors.background }),
+    [theme.colors.background],
+  )
+  const styleWithoutBackground = useMemo(
+    () => removeBackgroundColor(style),
+    [style],
+  )
+  const safeAreaEdges = useMemo(
+    () => resolveEdges(immersive, edges),
+    [immersive, edges],
+  )
+
+  return (
+    <SafeAreaView
+      style={[styles.root, themeBackgroundStyle, styleWithoutBackground]}
+      edges={safeAreaEdges}
+    >
+      {children}
+    </SafeAreaView>
+  )
+}

package/src/layout/Row.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+import type { ViewStyle } from 'react-native'
+
+import { Box } from './Box'
+import type { RowProps } from './types'
+
+export function Row({
+  wrap = false,
+  inverted = false,
+  style,
+  ...boxProps
+}: RowProps) {
+  const directionStyle = useMemo<ViewStyle>(
+    () => ({
+      flexDirection: inverted ? 'row-reverse' : 'row',
+      ...(wrap && { flexWrap: 'wrap' }),
+    }),
+    [wrap, inverted],
+  )
+
+  return <Box {...boxProps} style={[directionStyle, style]} />
+}

package/src/layout/index.ts

@@ -0,0 +1,13 @@
+export { Layout } from './Layout'
+export type { LayoutProps } from './Layout'
+export { Box } from './Box'
+export { Column } from './Column'
+export { Grid } from './Grid'
+export { Row } from './Row'
+export type {
+  BoxProps,
+  ColumnProps,
+  GridProps,
+  RowProps,
+  SpacingValue,
+} from './types'

package/src/layout/resolveSpacing.ts

@@ -0,0 +1,11 @@
+import type { Theme } from '@onlynative/core'
+import type { SpacingValue } from './types'
+
+export function resolveSpacing(
+  spacing: Theme['spacing'],
+  value: SpacingValue | undefined,
+): number | undefined {
+  if (value === undefined) return undefined
+  if (typeof value === 'number') return value
+  return spacing[value]
+}