@onlynative/components 0.1.0 → 0.1.1-alpha.1

package/src/icon-button/styles.ts

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

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

@@ -1,54 +0,0 @@
-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'
-
-export { KeyboardAvoidingWrapper } from './keyboard-avoiding-wrapper'
-export type { KeyboardAvoidingWrapperProps } from './keyboard-avoiding-wrapper'

package/src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx

@@ -1,69 +0,0 @@
-import { useEffect } from 'react'
-import {
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  ScrollView,
-} from 'react-native'
-
-import type { KeyboardAvoidingWrapperProps } from './types'
-import { styles } from './styles'
-
-const isIOS = Platform.OS === 'ios'
-
-export function KeyboardAvoidingWrapper({
-  children,
-  behavior = 'padding',
-  keyboardVerticalOffset = 0,
-  enabled = true,
-  scrollViewProps,
-  onKeyboardShow,
-  onKeyboardHide,
-  style,
-  contentContainerStyle,
-}: KeyboardAvoidingWrapperProps) {
-  useEffect(() => {
-    const subscriptions: ReturnType<typeof Keyboard.addListener>[] = []
-
-    if (onKeyboardShow) {
-      const showEvent = isIOS
-        ? 'keyboardWillShow'
-        : 'keyboardDidShow'
-      subscriptions.push(
-        Keyboard.addListener(showEvent, onKeyboardShow),
-      )
-    }
-
-    if (onKeyboardHide) {
-      const hideEvent = isIOS
-        ? 'keyboardWillHide'
-        : 'keyboardDidHide'
-      subscriptions.push(
-        Keyboard.addListener(hideEvent, onKeyboardHide),
-      )
-    }
-
-    return () => {
-      subscriptions.forEach((sub) => sub.remove())
-    }
-  }, [onKeyboardShow, onKeyboardHide])
-
-  return (
-    <KeyboardAvoidingView
-      style={[styles.root, style]}
-      behavior={behavior}
-      keyboardVerticalOffset={keyboardVerticalOffset}
-      enabled={!isIOS && enabled}
-    >
-      <ScrollView
-        automaticallyAdjustKeyboardInsets={isIOS && enabled}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={false}
-        {...scrollViewProps}
-        contentContainerStyle={[styles.container, contentContainerStyle]}
-      >
-        {children}
-      </ScrollView>
-    </KeyboardAvoidingView>
-  )
-}

package/src/keyboard-avoiding-wrapper/index.ts

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

package/src/keyboard-avoiding-wrapper/styles.ts

@@ -1,10 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-export const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-  container: {
-    flexGrow: 1,
-  },
-})

package/src/keyboard-avoiding-wrapper/types.ts

@@ -1,37 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import type {
-  KeyboardAvoidingViewProps,
-  KeyboardEvent,
-  ScrollViewProps,
-  StyleProp,
-  ViewStyle,
-} from 'react-native'
-
-export interface KeyboardAvoidingWrapperProps extends PropsWithChildren {
-  /**
-   * Keyboard avoidance strategy.
-   * @default 'padding'
-   */
-  behavior?: KeyboardAvoidingViewProps['behavior']
-  /**
-   * Extra offset added to the keyboard height calculation.
-   * Useful for accounting for headers or tab bars.
-   * @default 0
-   */
-  keyboardVerticalOffset?: number
-  /**
-   * Enable or disable the keyboard avoiding behavior.
-   * @default true
-   */
-  enabled?: boolean
-  /** Props forwarded to the inner `ScrollView`. */
-  scrollViewProps?: ScrollViewProps
-  /** Called when the keyboard is about to show (iOS) or has shown (Android). */
-  onKeyboardShow?: (event: KeyboardEvent) => void
-  /** Called when the keyboard is about to hide (iOS) or has hidden (Android). */
-  onKeyboardHide?: (event: KeyboardEvent) => void
-  /** Style applied to the outer `KeyboardAvoidingView`. */
-  style?: StyleProp<ViewStyle>
-  /** Style applied to the inner `ScrollView` contentContainerStyle. */
-  contentContainerStyle?: StyleProp<ViewStyle>
-}

package/src/layout/Box.tsx

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

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

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