@onlynative/components 0.1.0-alpha.0

package/src/text-field/styles.ts

@@ -0,0 +1,240 @@
+import { StyleSheet } from 'react-native'
+import type { Theme } from '@onlynative/core'
+
+import type { TextFieldVariant } from './types'
+import { alphaColor } from '../utils/color'
+import { transformOrigin } from '../utils/rtl'
+
+const CONTAINER_HEIGHT = 56
+const ICON_SIZE = 24
+const LABEL_FLOATED_LINE_HEIGHT = 16
+
+// Filled: label floated 8dp from top, input at 24dp (8 + 16 label height), 8dp bottom.
+// Label resting = vertically centered = (56 - 24) / 2 = 16dp from top.
+const FILLED_LABEL_RESTING_TOP = 16
+const FILLED_LABEL_FLOATED_TOP = 8
+const FILLED_INPUT_TOP = 24 // 8dp label top + 16dp label line-height
+const FILLED_INPUT_BOTTOM = 8
+
+// Outlined: input centered 16dp top/bottom. Label resting = same 16dp.
+// Label floated = centered on the border = -(lineHeight / 2).
+const OUTLINED_INPUT_VERTICAL = 16
+const OUTLINED_LABEL_RESTING_TOP = 16
+const OUTLINED_LABEL_FLOATED_TOP = -(LABEL_FLOATED_LINE_HEIGHT / 2) // -8
+
+export const labelPositions = {
+  filledRestingTop: FILLED_LABEL_RESTING_TOP,
+  filledFloatedTop: FILLED_LABEL_FLOATED_TOP,
+  outlinedRestingTop: OUTLINED_LABEL_RESTING_TOP,
+  outlinedFloatedTop: OUTLINED_LABEL_FLOATED_TOP,
+} as const
+
+interface VariantColors {
+  backgroundColor: string
+  borderColor: string
+  focusedBorderColor: string
+  errorBorderColor: string
+  disabledBorderColor: string
+  disabledBackgroundColor: string
+  labelColor: string
+  focusedLabelColor: string
+  errorLabelColor: string
+  disabledLabelColor: string
+  textColor: string
+  disabledTextColor: string
+  placeholderColor: string
+  supportingTextColor: string
+  errorSupportingTextColor: string
+  iconColor: string
+  errorIconColor: string
+  disabledIconColor: string
+}
+
+function getVariantColors(
+  theme: Theme,
+  variant: TextFieldVariant,
+): VariantColors {
+  const disabledOpacity = theme.stateLayer.disabledOpacity
+
+  const common = {
+    focusedBorderColor: theme.colors.primary,
+    errorBorderColor: theme.colors.error,
+    focusedLabelColor: theme.colors.primary,
+    errorLabelColor: theme.colors.error,
+    textColor: theme.colors.onSurface,
+    disabledTextColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledLabelColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledBorderColor: alphaColor(theme.colors.onSurface, 0.12),
+    placeholderColor: theme.colors.onSurfaceVariant,
+    supportingTextColor: theme.colors.onSurfaceVariant,
+    errorSupportingTextColor: theme.colors.error,
+    iconColor: theme.colors.onSurfaceVariant,
+    errorIconColor: theme.colors.error,
+    disabledIconColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+  }
+
+  if (variant === 'outlined') {
+    return {
+      ...common,
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.outline,
+      disabledBackgroundColor: 'transparent',
+      labelColor: theme.colors.onSurfaceVariant,
+    }
+  }
+
+  return {
+    ...common,
+    backgroundColor: theme.colors.surfaceContainerHighest,
+    borderColor: theme.colors.onSurfaceVariant,
+    disabledBackgroundColor: alphaColor(theme.colors.onSurface, 0.04),
+    labelColor: theme.colors.onSurfaceVariant,
+  }
+}
+
+export function createStyles(theme: Theme, variant: TextFieldVariant) {
+  const colors = getVariantColors(theme, variant)
+  const bodyLarge = theme.typography.bodyLarge
+  const bodySmall = theme.typography.bodySmall
+  const isFilled = variant === 'filled'
+
+  return {
+    colors,
+    styles: StyleSheet.create({
+      root: {
+        alignSelf: 'stretch',
+      },
+      container: {
+        minHeight: CONTAINER_HEIGHT,
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        backgroundColor: colors.backgroundColor,
+        paddingHorizontal: theme.spacing.md,
+        ...(isFilled
+          ? {
+              borderTopStartRadius: theme.shape.cornerExtraSmall,
+              borderTopEndRadius: theme.shape.cornerExtraSmall,
+            }
+          : {
+              borderRadius: theme.shape.cornerExtraSmall,
+              borderWidth: 1,
+              borderColor: colors.borderColor,
+            }),
+      },
+      containerFocused: isFilled
+        ? {}
+        : {
+            borderWidth: 2,
+            borderColor: colors.focusedBorderColor,
+            paddingHorizontal: theme.spacing.md - 1,
+          },
+      containerError: isFilled
+        ? {}
+        : {
+            borderWidth: 2,
+            borderColor: colors.errorBorderColor,
+            paddingHorizontal: theme.spacing.md - 1,
+          },
+      containerDisabled: isFilled
+        ? { backgroundColor: colors.disabledBackgroundColor }
+        : {
+            borderColor: colors.disabledBorderColor,
+          },
+      indicator: {
+        position: 'absolute',
+        start: 0,
+        end: 0,
+        bottom: 0,
+        height: 1,
+        backgroundColor: colors.borderColor,
+      },
+      indicatorFocused: {
+        height: 2,
+        backgroundColor: colors.focusedBorderColor,
+      },
+      indicatorError: {
+        height: 2,
+        backgroundColor: colors.errorBorderColor,
+      },
+      indicatorDisabled: {
+        backgroundColor: colors.disabledBorderColor,
+      },
+      inputWrapper: {
+        flex: 1,
+        justifyContent: 'center',
+      },
+      // When label is present, use explicit padding so the input position
+      // matches the label resting top exactly.
+      inputWrapperWithLabel: {
+        justifyContent: 'flex-start',
+        paddingTop: isFilled ? FILLED_INPUT_TOP : OUTLINED_INPUT_VERTICAL,
+        paddingBottom: isFilled ? FILLED_INPUT_BOTTOM : OUTLINED_INPUT_VERTICAL,
+      },
+      label: {
+        position: 'absolute',
+        zIndex: 1,
+        fontFamily: bodySmall.fontFamily,
+        fontSize: bodySmall.fontSize,
+        lineHeight: bodySmall.lineHeight,
+        fontWeight: bodySmall.fontWeight,
+        letterSpacing: bodySmall.letterSpacing,
+        color: colors.labelColor,
+        transformOrigin: transformOrigin('top'),
+      },
+      labelNotch: {
+        paddingHorizontal: 4,
+      },
+      input: {
+        fontFamily: bodyLarge.fontFamily,
+        fontSize: bodyLarge.fontSize,
+        lineHeight: bodyLarge.lineHeight,
+        fontWeight: bodyLarge.fontWeight,
+        letterSpacing: bodyLarge.letterSpacing,
+        color: colors.textColor,
+        paddingVertical: 0,
+        paddingHorizontal: 0,
+        margin: 0,
+        includeFontPadding: false,
+      },
+      inputDisabled: {
+        color: colors.disabledTextColor,
+      },
+      leadingIcon: {
+        alignSelf: 'center',
+        marginStart: -4, // 16dp container padding → 12dp icon inset per M3
+        marginEnd: theme.spacing.md,
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      trailingIcon: {
+        alignSelf: 'center',
+        marginStart: theme.spacing.md,
+        marginEnd: -4, // 16dp container padding → 12dp icon inset per M3
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      trailingIconPressable: {
+        alignSelf: 'center',
+      },
+      supportingTextRow: {
+        paddingHorizontal: theme.spacing.md,
+        paddingTop: theme.spacing.xs,
+      },
+      supportingText: {
+        fontFamily: bodySmall.fontFamily,
+        fontSize: bodySmall.fontSize,
+        lineHeight: bodySmall.lineHeight,
+        fontWeight: bodySmall.fontWeight,
+        letterSpacing: bodySmall.letterSpacing,
+        color: colors.supportingTextColor,
+      },
+      errorSupportingText: {
+        color: colors.errorSupportingTextColor,
+      },
+    }),
+  }
+}

package/src/text-field/types.ts

@@ -0,0 +1,49 @@
+import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import type { ComponentProps } from 'react'
+import type { StyleProp, TextInputProps, TextStyle } from 'react-native'
+
+/** Visual container style for the text field. */
+export type TextFieldVariant = 'filled' | 'outlined'
+
+export interface TextFieldProps
+  extends Omit<TextInputProps, 'placeholderTextColor' | 'editable'> {
+  /** Floating label text. Animates above the input when focused or filled. */
+  label?: string
+  /**
+   * Container style.
+   * @default 'filled'
+   */
+  variant?: TextFieldVariant
+  /** Helper text displayed below the field. Hidden when `error` or `errorText` is active. */
+  supportingText?: string
+  /** Error message. When provided, implicitly sets `error` to `true` and replaces `supportingText`. */
+  errorText?: string
+  /**
+   * When `true`, renders the field in error state with error colors.
+   * @default false
+   */
+  error?: boolean
+  /**
+   * Disables text input and reduces opacity.
+   * @default false
+   */
+  disabled?: boolean
+  /** MaterialCommunityIcons icon name rendered at the start of the field. */
+  leadingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
+  /** MaterialCommunityIcons icon name rendered at the end of the field. */
+  trailingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name']
+  /** Called when the trailing icon is pressed. */
+  onTrailingIconPress?: () => void
+  /**
+   * Override the container (background) color.
+   * Disabled state still uses the standard disabled appearance.
+   */
+  containerColor?: string
+  /**
+   * Override the content (input text and icon) color.
+   * Error and disabled states take precedence.
+   */
+  contentColor?: string
+  /** Additional style applied to the text input element. */
+  inputStyle?: StyleProp<TextStyle>
+}

package/src/typography/Typography.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from 'react'
+import type { ComponentType, ReactNode } from 'react'
+import type { StyleProp, TextProps, TextStyle } from 'react-native'
+import { Text } from 'react-native'
+import { useTheme } from '@onlynative/core'
+import type { Theme } from '@onlynative/core'
+
+import type { TypographyVariant } from './types'
+
+const HEADING_VARIANTS: ReadonlySet<TypographyVariant> = new Set([
+  'displayLarge',
+  'displayMedium',
+  'displaySmall',
+  'headlineLarge',
+  'headlineMedium',
+  'headlineSmall',
+])
+
+export interface TypographyProps extends Omit<TextProps, 'children' | 'style'> {
+  /** Content to display. Accepts strings, numbers, or nested elements. */
+  children: ReactNode
+  /**
+   * MD3 type scale role. Controls font size, weight, line height, and letter spacing.
+   * @default 'bodyMedium'
+   */
+  variant?: TypographyVariant
+  /** Override the text color. Defaults to the theme's `onSurface` color. */
+  color?: string
+  /** Additional text styles merged after the theme typography styles. */
+  style?: StyleProp<TextStyle>
+  /**
+   * Override the underlying text component (e.g. Animated.Text).
+   * @default Text
+   */
+  as?: ComponentType<TextProps>
+}
+
+export function Typography({
+  children,
+  variant = 'bodyMedium',
+  color,
+  style,
+  as: Component = Text,
+  accessibilityRole,
+  ...textProps
+}: TypographyProps) {
+  const theme = useTheme() as Theme
+  const typographyStyle = theme.typography[variant]
+  const colorStyle = useMemo(
+    () => ({ color: color ?? theme.colors.onSurface }),
+    [color, theme.colors.onSurface],
+  )
+  const resolvedRole =
+    accessibilityRole ?? (HEADING_VARIANTS.has(variant) ? 'header' : undefined)
+
+  return (
+    <Component
+      {...textProps}
+      accessibilityRole={resolvedRole}
+      style={[typographyStyle, colorStyle, style]}
+    >
+      {children}
+    </Component>
+  )
+}

package/src/typography/index.ts

@@ -0,0 +1,3 @@
+export { Typography } from './Typography'
+export type { TypographyProps } from './Typography'
+export type { TypographyVariant } from './types'

package/src/typography/types.ts

@@ -0,0 +1,17 @@
+/** Material Design 3 type scale role. */
+export type TypographyVariant =
+  | 'displayLarge'
+  | 'displayMedium'
+  | 'displaySmall'
+  | 'headlineLarge'
+  | 'headlineMedium'
+  | 'headlineSmall'
+  | 'titleLarge'
+  | 'titleMedium'
+  | 'titleSmall'
+  | 'bodyLarge'
+  | 'bodyMedium'
+  | 'bodySmall'
+  | 'labelLarge'
+  | 'labelMedium'
+  | 'labelSmall'

package/src/utils/color.ts

@@ -0,0 +1,64 @@
+interface RgbChannels {
+  r: number
+  g: number
+  b: number
+}
+
+function parseHexColor(color: string): RgbChannels | null {
+  const normalized = color.replace('#', '')
+
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    return null
+  }
+
+  const r = Number.parseInt(normalized.slice(0, 2), 16)
+  const g = Number.parseInt(normalized.slice(2, 4), 16)
+  const b = Number.parseInt(normalized.slice(4, 6), 16)
+
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return null
+  }
+
+  return { r, g, b }
+}
+
+function clampAlpha(alpha: number): number {
+  return Math.max(0, Math.min(1, alpha))
+}
+
+export function alphaColor(color: string, alpha: number): string {
+  const channels = parseHexColor(color)
+  const boundedAlpha = clampAlpha(alpha)
+
+  if (!channels) {
+    return color
+  }
+
+  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`
+}
+
+export function blendColor(
+  base: string,
+  overlay: string,
+  overlayAlpha: number,
+): string {
+  const baseChannels = parseHexColor(base)
+  const overlayChannels = parseHexColor(overlay)
+  const boundedAlpha = clampAlpha(overlayAlpha)
+
+  if (!baseChannels || !overlayChannels) {
+    return alphaColor(overlay, boundedAlpha)
+  }
+
+  const r = Math.round(
+    (1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r,
+  )
+  const g = Math.round(
+    (1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g,
+  )
+  const b = Math.round(
+    (1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b,
+  )
+
+  return `rgb(${r}, ${g}, ${b})`
+}

package/src/utils/elevation.ts

@@ -0,0 +1,33 @@
+import { Platform } from 'react-native'
+import type { ViewStyle } from 'react-native'
+import type { ElevationLevel } from '@onlynative/core'
+
+/**
+ * Converts a theme elevation level into platform-appropriate shadow styles.
+ * - Native: uses shadow* props + elevation
+ * - Web: uses boxShadow string
+ */
+export function elevationStyle(level: ElevationLevel): ViewStyle {
+  if (Platform.OS === 'web') {
+    const { shadowOffset, shadowOpacity, shadowRadius } = level
+
+    if (shadowOpacity === 0) {
+      return { boxShadow: 'none' } as ViewStyle
+    }
+
+    return {
+      boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`,
+    } as ViewStyle
+  }
+
+  return {
+    shadowColor: level.shadowColor,
+    shadowOffset: {
+      width: level.shadowOffset.width,
+      height: level.shadowOffset.height,
+    },
+    shadowOpacity: level.shadowOpacity,
+    shadowRadius: level.shadowRadius,
+    elevation: level.elevation,
+  }
+}

package/src/utils/rtl.ts

@@ -0,0 +1,19 @@
+import { I18nManager } from 'react-native'
+
+/**
+ * Returns the appropriate transform origin for animations that scale
+ * from a horizontal edge (e.g. label shrink in TextField).
+ */
+export function transformOrigin(
+  vertical: 'top' | 'center' | 'bottom' = 'top',
+): string {
+  return I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`
+}
+
+/**
+ * Picks a value based on layout direction.
+ * Useful for selecting mirrored icons or other direction-dependent values.
+ */
+export function selectRTL<T>(ltr: T, rtl: T): T {
+  return I18nManager.isRTL ? rtl : ltr
+}