@onlynative/components 0.1.1-alpha.0 → 0.1.1-alpha.2

package/src/text-field/TextField.tsx

@@ -1,301 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  Animated,
-  Platform,
-  Pressable,
-  Text,
-  TextInput,
-  View,
-} from 'react-native'
-import type { NativeSyntheticEvent, TargetedEvent } from 'react-native'
-import { useTheme } from '@onlynative/core'
-
-import { getMaterialCommunityIcons } from '@onlynative/utils'
-import { createStyles, labelPositions } from './styles'
-import type { TextFieldProps } from './types'
-
-const ICON_SIZE = 24
-// 12dp icon inset + 24dp icon + 16dp gap
-const ICON_WITH_GAP = 12 + 24 + 16
-
-export function TextField({
-  value,
-  onChangeText,
-  label,
-  placeholder,
-  variant = 'filled',
-  supportingText,
-  errorText,
-  error = false,
-  disabled = false,
-  leadingIcon,
-  trailingIcon,
-  onTrailingIconPress,
-  multiline = false,
-  onFocus,
-  onBlur,
-  style,
-  containerColor,
-  contentColor,
-  inputStyle,
-  ...textInputProps
-}: TextFieldProps) {
-  const theme = useTheme()
-  const isDisabled = Boolean(disabled)
-  const isError = Boolean(error) || Boolean(errorText)
-  const isFilled = variant === 'filled'
-  const hasLeadingIcon = Boolean(leadingIcon)
-
-  const MaterialCommunityIcons =
-    leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null
-
-  const { colors, styles } = useMemo(
-    () => createStyles(theme, variant),
-    [theme, variant],
-  )
-
-  const [isFocused, setIsFocused] = useState(false)
-  const [internalHasText, setInternalHasText] = useState(
-    () => value !== undefined && value !== '',
-  )
-  const inputRef = useRef<TextInput>(null)
-
-  const isControlled = value !== undefined
-  const hasValue = isControlled ? value !== '' : internalHasText
-  const isLabelFloated = isFocused || hasValue
-
-  // Animation: 0 = resting (label large, centered), 1 = floated (label small, top)
-  const labelAnimRef = useRef(new Animated.Value(isLabelFloated ? 1 : 0))
-  const labelAnim = labelAnimRef.current
-
-  useEffect(() => {
-    Animated.timing(labelAnim, {
-      toValue: isLabelFloated ? 1 : 0,
-      duration: 150,
-      useNativeDriver: Platform.OS !== 'web',
-    }).start()
-  }, [isLabelFloated, labelAnim])
-
-  // Scale: bodyLarge/bodySmall when resting → 1.0 when floated.
-  // Label is always rendered at bodySmall size; scale makes it appear as bodyLarge.
-  const labelScale = useMemo(() => {
-    const restingScale =
-      theme.typography.bodyLarge.fontSize / theme.typography.bodySmall.fontSize
-    return labelAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [restingScale, 1],
-    })
-  }, [
-    labelAnim,
-    theme.typography.bodyLarge.fontSize,
-    theme.typography.bodySmall.fontSize,
-  ])
-
-  // TranslateY: moves label from floated position down to resting position.
-  // Static top = floatedTop; translateY shifts it to restingTop when at rest.
-  const labelTranslateY = useMemo(() => {
-    const restingTop = isFilled
-      ? labelPositions.filledRestingTop
-      : labelPositions.outlinedRestingTop
-    const floatedTop = isFilled
-      ? labelPositions.filledFloatedTop
-      : labelPositions.outlinedFloatedTop
-    const restingOffset = restingTop - floatedTop
-    return labelAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [restingOffset, 0],
-    })
-  }, [isFilled, labelAnim])
-
-  // Label start: 16dp container padding + leading icon space (12dp inset + 24dp + 16dp gap)
-  const labelStart =
-    theme.spacing.md + (hasLeadingIcon ? ICON_WITH_GAP - theme.spacing.md : 0)
-  // Static top = floated position; translateY handles resting offset
-  const labelStaticTop = isFilled
-    ? labelPositions.filledFloatedTop
-    : labelPositions.outlinedFloatedTop
-
-  const handleChangeText = useCallback(
-    (text: string) => {
-      if (!isControlled) {
-        setInternalHasText(text !== '')
-      }
-      onChangeText?.(text)
-    },
-    [isControlled, onChangeText],
-  )
-
-  const handleFocus = useCallback(
-    (event: NativeSyntheticEvent<TargetedEvent>) => {
-      if (isDisabled) return
-      setIsFocused(true)
-      onFocus?.(event)
-    },
-    [isDisabled, onFocus],
-  )
-
-  const handleBlur = useCallback(
-    (event: NativeSyntheticEvent<TargetedEvent>) => {
-      setIsFocused(false)
-      onBlur?.(event)
-    },
-    [onBlur],
-  )
-
-  const handleContainerPress = useCallback(() => {
-    if (!isDisabled) {
-      inputRef.current?.focus()
-    }
-  }, [isDisabled])
-
-  const labelColor = isDisabled
-    ? colors.disabledLabelColor
-    : isError
-      ? colors.errorLabelColor
-      : isFocused
-        ? colors.focusedLabelColor
-        : colors.labelColor
-
-  const labelBackgroundColor =
-    variant === 'outlined' && isLabelFloated
-      ? theme.colors.surface
-      : 'transparent'
-
-  const iconColor = isDisabled
-    ? colors.disabledIconColor
-    : isError
-      ? colors.errorIconColor
-      : contentColor ?? colors.iconColor
-
-  const containerStyle = useMemo(
-    () => [
-      styles.container,
-      containerColor && !isDisabled
-        ? { backgroundColor: containerColor }
-        : undefined,
-      isFocused && styles.containerFocused,
-      isError && !isFocused && styles.containerError,
-      isDisabled && styles.containerDisabled,
-    ],
-    [styles, isFocused, isError, isDisabled, containerColor],
-  )
-
-  const indicatorStyle = useMemo(
-    () => [
-      styles.indicator,
-      isFocused && styles.indicatorFocused,
-      isError && !isFocused && styles.indicatorError,
-      isDisabled && styles.indicatorDisabled,
-    ],
-    [styles, isFocused, isError, isDisabled],
-  )
-
-  const displaySupportingText = isError ? errorText : supportingText
-
-  return (
-    <View style={[styles.root, style]}>
-      <Pressable onPress={handleContainerPress} disabled={isDisabled}>
-        <View style={containerStyle}>
-          {leadingIcon ? (
-            <View style={styles.leadingIcon}>
-              <MaterialCommunityIcons
-                name={leadingIcon}
-                size={ICON_SIZE}
-                color={iconColor}
-              />
-            </View>
-          ) : null}
-
-          <View
-            style={[
-              styles.inputWrapper,
-              label ? styles.inputWrapperWithLabel : undefined,
-            ]}
-          >
-            <TextInput
-              ref={inputRef}
-              {...textInputProps}
-              value={value}
-              onChangeText={handleChangeText}
-              editable={!isDisabled}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              placeholder={isLabelFloated || !label ? placeholder : undefined}
-              placeholderTextColor={colors.placeholderColor}
-              multiline={multiline}
-              style={[
-                styles.input,
-                isDisabled ? styles.inputDisabled : undefined,
-                contentColor && !isDisabled
-                  ? { color: contentColor }
-                  : undefined,
-                inputStyle,
-              ]}
-              accessibilityLabel={label || undefined}
-              accessibilityState={{ disabled: isDisabled }}
-              accessibilityHint={isError && errorText ? errorText : undefined}
-            />
-          </View>
-
-          {trailingIcon ? (
-            <Pressable
-              onPress={onTrailingIconPress}
-              disabled={isDisabled || !onTrailingIconPress}
-              accessibilityRole="button"
-              hitSlop={12}
-              style={styles.trailingIconPressable}
-            >
-              <View style={styles.trailingIcon}>
-                <MaterialCommunityIcons
-                  name={trailingIcon}
-                  size={ICON_SIZE}
-                  color={iconColor}
-                />
-              </View>
-            </Pressable>
-          ) : null}
-
-          {/* Label: rendered at bodySmall, scaled up via transform when resting */}
-          {label ? (
-            <Animated.Text
-              numberOfLines={1}
-              style={[
-                styles.label,
-                {
-                  top: labelStaticTop,
-                  start: labelStart,
-                  color: labelColor,
-                  backgroundColor: labelBackgroundColor,
-                  transform: [
-                    { translateY: labelTranslateY },
-                    { scale: labelScale },
-                  ],
-                },
-                variant === 'outlined' && isLabelFloated
-                  ? styles.labelNotch
-                  : undefined,
-              ]}
-            >
-              {label}
-            </Animated.Text>
-          ) : null}
-
-          {isFilled ? <View style={indicatorStyle} /> : null}
-        </View>
-      </Pressable>
-
-      {displaySupportingText ? (
-        <View style={styles.supportingTextRow}>
-          <Text
-            style={[
-              styles.supportingText,
-              isError ? styles.errorSupportingText : undefined,
-            ]}
-          >
-            {displaySupportingText}
-          </Text>
-        </View>
-      ) : null}
-    </View>
-  )
-}

package/src/text-field/index.ts

@@ -1,2 +0,0 @@
-export { TextField } from './TextField'
-export type { TextFieldProps, TextFieldVariant } from './types'

package/src/text-field/styles.ts

@@ -1,239 +0,0 @@
-import { StyleSheet } from 'react-native'
-import type { MaterialTheme } from '@onlynative/core'
-
-import type { TextFieldVariant } from './types'
-import { alphaColor, transformOrigin } from '@onlynative/utils'
-
-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: MaterialTheme,
-  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: MaterialTheme, 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

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

@@ -1,79 +0,0 @@
-import { useMemo } from 'react'
-import type { ComponentType, ReactNode } from 'react'
-import type { StyleProp, TextProps, TextStyle } from 'react-native'
-import { StyleSheet, Text } from 'react-native'
-import { useTheme } from '@onlynative/core'
-import type { MaterialTheme } 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. Takes priority over `style.color`. Defaults to the theme's `onSurface` color. */
-  color?: string
-  /** Additional text styles. Can override the default theme color via `style.color` when no `color` prop is set. */
-  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 MaterialTheme
-  const typographyStyle = theme.typography[variant]
-  const resolvedRole =
-    accessibilityRole ?? (HEADING_VARIANTS.has(variant) ? 'header' : undefined)
-
-  // When the consumer overrides fontSize via style, auto-adjust lineHeight
-  // proportionally so text isn't clipped inside overflow:hidden containers.
-  // Skipped when: no style prop (theme lineHeight is already proportional),
-  // no fontSize override, or consumer explicitly sets lineHeight.
-  const lineHeightFix = useMemo(() => {
-    if (!style) return undefined
-    const flat = StyleSheet.flatten(style)
-    if (!flat?.fontSize || flat.lineHeight) return undefined
-    const ratio = typographyStyle.lineHeight / typographyStyle.fontSize
-    return { lineHeight: Math.ceil(flat.fontSize * ratio) }
-  }, [style, typographyStyle.fontSize, typographyStyle.lineHeight])
-
-  return (
-    <Component
-      {...textProps}
-      accessibilityRole={resolvedRole}
-      style={[
-        { color: theme.colors.onSurface },
-        typographyStyle,
-        style,
-        lineHeightFix,
-        color != null ? { color } : undefined,
-      ]}
-    >
-      {children}
-    </Component>
-  )
-}

package/src/typography/index.ts

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

package/src/typography/types.ts

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