@onlynative/components 0.1.0 → 0.1.1-alpha.1

package/src/layout/Layout.tsx

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

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

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

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

package/src/layout/types.ts

@@ -1,82 +0,0 @@
-import type { FlexAlignType, ViewProps } from 'react-native'
-import type { MaterialTheme } from '@onlynative/core'
-
-/** A theme spacing token name or a raw numeric value in dp. */
-export type SpacingValue = keyof MaterialTheme['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

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

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

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

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

@@ -1,132 +0,0 @@
-import { StyleSheet } from 'react-native'
-import type { MaterialTheme } from '@onlynative/core'
-
-import type { ListItemLines } from './types'
-import { alphaColor, blendColor } from '@onlynative/utils'
-
-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: MaterialTheme) {
-  return StyleSheet.create({
-    container: {
-      paddingVertical: theme.spacing.sm,
-    },
-  })
-}
-
-interface ItemColors {
-  backgroundColor: string
-  hoveredBackgroundColor: string
-  pressedBackgroundColor: string
-}
-
-function getItemColors(theme: MaterialTheme, 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: MaterialTheme,
-  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: MaterialTheme, inset: boolean) {
-  return StyleSheet.create({
-    divider: {
-      height: 1,
-      backgroundColor: theme.colors.outlineVariant,
-      ...(inset ? { marginStart: INSET_START } : undefined),
-    },
-  })
-}

package/src/list/types.ts

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

@@ -1,103 +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 { 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

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