@tamagui/input 2.7.7 → 3.0.0-beta.1093.1

package/src/Input.tsx

@@ -1,173 +1,169 @@
-import { type GetProps, View, styled, useTheme } from '@tamagui/core'
+import { createStyledHOC, type GetProps, View, styled } from '@tamagui/core'
 import { registerFocusable } from '@tamagui/focusable'
 import { useWebRef } from '@tamagui/element'
 import React from 'react'
-import { styledBody } from './shared'
+import { resolveMultilineInputSize, styledBody } from './shared'
 import type { InputExtraProps } from './types'
 
-const StyledInput = styled(View, styledBody[0], styledBody[1])
+const StyledInput = styled(View, styledBody[0], styledBody[1]).resolve(
+  resolveMultilineInputSize
+)
 
 /**
  * A web-aligned input component.
  * @see — Docs https://tamagui.dev/ui/inputs#input
  */
-export const Input = StyledInput.styleable<InputExtraProps>((props, _forwardedRef) => {
-  const {
-    disabled,
-    id,
-    onChangeText,
-    onSubmitEditing,
-    onSelectionChange,
-    selection,
-    placeholderTextColor,
-    selectionColor,
-    rows,
-
-    // Native-only props (ignored on web)
-    keyboardAppearance,
-    returnKeyType,
-    submitBehavior,
-    blurOnSubmit,
-    caretHidden,
-    contextMenuHidden,
-    selectTextOnFocus,
-    secureTextEntry,
-    maxFontSizeMultiplier,
-    allowFontScaling,
-    multiline,
-    keyboardType,
-    autoCapitalize: autoCapitalizeProp,
-    autoCorrect: autoCorrectProp,
-    autoFocusNative,
-    textContentType,
-    onEndEditing,
-    onContentSizeChange,
-    onScroll,
-    onKeyPress,
-
-    // iOS-only props (ignored on web)
-    clearButtonMode,
-    clearTextOnFocus,
-    enablesReturnKeyAutomatically,
-    dataDetectorTypes,
-    scrollEnabled,
-    passwordRules,
-    rejectResponderTermination,
-    spellCheck,
-    lineBreakStrategyIOS,
-    lineBreakModeIOS,
-    smartInsertDelete,
-    inputAccessoryViewID,
-    inputAccessoryViewButtonLabel,
-    disableKeyboardShortcuts,
-
-    // Android-only props (ignored on web)
-    cursorColor,
-    selectionHandleColor,
-    underlineColorAndroid,
-    importantForAutofill,
-    disableFullscreenUI,
-    inlineImageLeft,
-    inlineImagePadding,
-    returnKeyLabel,
-    textBreakStrategy,
-    textAlignVertical,
-    verticalAlign,
-    showSoftInputOnFocus,
-    numberOfLines,
-
-    ...rest
-  } = props
-
-  const { ref, composedRef } = useWebRef<HTMLInputElement>(_forwardedRef)
-  const theme = useTheme()
-
-  // convert native-style values to web equivalents
-  const autoCorrect =
-    autoCorrectProp === true ? 'on' : autoCorrectProp === false ? 'off' : autoCorrectProp
-  const autoCapitalize =
-    autoCapitalizeProp === 'sentences' || autoCapitalizeProp === 'words'
-      ? 'on'
-      : autoCapitalizeProp === 'none' || autoCapitalizeProp === 'characters'
-        ? 'off'
-        : autoCapitalizeProp
-
-  // Handle selection changes
-  React.useEffect(() => {
-    if (!onSelectionChange) return
-
-    const node = ref.current
-    if (!node) return
-
-    const handleSelectionChange = () => {
-      onSelectionChange({
-        nativeEvent: {
-          selection: {
-            start: node.selectionStart ?? 0,
-            end: node.selectionEnd ?? 0,
+export const Input = createStyledHOC(
+  StyledInput,
+  (
+    props: Omit<GetProps<typeof StyledInput>, keyof InputExtraProps> & InputExtraProps,
+    _forwardedRef
+  ) => {
+    const {
+      disabled,
+      id,
+      onChangeText,
+      onSubmitEditing,
+      onSelectionChange,
+      selection,
+      rows,
+
+      // Native-only props (ignored on web)
+      keyboardAppearance,
+      returnKeyType,
+      submitBehavior,
+      blurOnSubmit,
+      caretHidden,
+      contextMenuHidden,
+      selectTextOnFocus,
+      secureTextEntry,
+      maxFontSizeMultiplier,
+      allowFontScaling,
+      multiline,
+      keyboardType,
+      autoCapitalize: autoCapitalizeProp,
+      autoCorrect: autoCorrectProp,
+      autoFocusNative,
+      textContentType,
+      onEndEditing,
+      onContentSizeChange,
+      onScroll,
+      onKeyPress,
+
+      // iOS-only props (ignored on web)
+      clearButtonMode,
+      clearTextOnFocus,
+      enablesReturnKeyAutomatically,
+      dataDetectorTypes,
+      scrollEnabled,
+      passwordRules,
+      rejectResponderTermination,
+      spellCheck,
+      lineBreakStrategyIOS,
+      lineBreakModeIOS,
+      smartInsertDelete,
+      inputAccessoryViewID,
+      inputAccessoryViewButtonLabel,
+      disableKeyboardShortcuts,
+
+      // Android-only props (ignored on web)
+      underlineColorAndroid,
+      importantForAutofill,
+      disableFullscreenUI,
+      inlineImageLeft,
+      inlineImagePadding,
+      returnKeyLabel,
+      textBreakStrategy,
+      textAlignVertical,
+      verticalAlign,
+      showSoftInputOnFocus,
+      numberOfLines,
+
+      ...rest
+    } = props
+
+    const { ref, composedRef } = useWebRef<HTMLInputElement>(_forwardedRef)
+    // convert native-style values to web equivalents
+    const autoCorrect =
+      autoCorrectProp === true
+        ? 'on'
+        : autoCorrectProp === false
+          ? 'off'
+          : autoCorrectProp
+    const autoCapitalize =
+      autoCapitalizeProp === 'sentences' || autoCapitalizeProp === 'words'
+        ? 'on'
+        : autoCapitalizeProp === 'none' || autoCapitalizeProp === 'characters'
+          ? 'off'
+          : autoCapitalizeProp
+
+    // Handle selection changes
+    React.useEffect(() => {
+      if (!onSelectionChange) return
+
+      const node = ref.current
+      if (!node) return
+
+      const handleSelectionChange = () => {
+        onSelectionChange({
+          nativeEvent: {
+            selection: {
+              start: node.selectionStart ?? 0,
+              end: node.selectionEnd ?? 0,
+            },
           },
-        },
+        })
+      }
+
+      node.addEventListener('select', handleSelectionChange)
+      return () => node.removeEventListener('select', handleSelectionChange)
+    }, [onSelectionChange])
+
+    // Sync selection prop
+    React.useEffect(() => {
+      if (selection && ref.current) {
+        ref.current.setSelectionRange(selection.start, selection.end ?? selection.start)
+      }
+    }, [selection?.start, selection?.end])
+
+    // Register focusable
+    React.useEffect(() => {
+      if (!id || disabled) return
+      return registerFocusable(id, {
+        focusAndSelect: () => ref.current?.focus(),
+        focus: () => ref.current?.focus(),
       })
+    }, [id, disabled])
+
+    // Handle keyboard submit
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && onSubmitEditing) {
+        onSubmitEditing({
+          nativeEvent: { text: (e.target as HTMLInputElement).value },
+        })
+      }
+      rest.onKeyDown?.(e)
     }
 
-    node.addEventListener('select', handleSelectionChange)
-    return () => node.removeEventListener('select', handleSelectionChange)
-  }, [onSelectionChange])
-
-  // Sync selection prop
-  React.useEffect(() => {
-    if (selection && ref.current) {
-      ref.current.setSelectionRange(selection.start, selection.end ?? selection.start)
-    }
-  }, [selection?.start, selection?.end])
-
-  // Register focusable
-  React.useEffect(() => {
-    if (!id || disabled) return
-    return registerFocusable(id, {
-      focusAndSelect: () => ref.current?.focus(),
-      focus: () => ref.current?.focus(),
-    })
-  }, [id, disabled])
-
-  // Handle keyboard submit
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && onSubmitEditing) {
-      onSubmitEditing({
-        nativeEvent: { text: (e.target as HTMLInputElement).value },
-      })
+    // Handle change with onChangeText support
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChangeText?.(e.target.value)
+      rest.onChange?.(e)
     }
-    rest.onKeyDown?.(e)
-  }
 
-  // Handle change with onChangeText support
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChangeText?.(e.target.value)
-    rest.onChange?.(e)
+    const finalProps = {
+      ...rest,
+      disabled,
+      id,
+      rows,
+      autoCorrect,
+      autoCapitalize,
+      onKeyDown: onSubmitEditing ? handleKeyDown : rest.onKeyDown,
+      onChange: onChangeText ? handleChange : rest.onChange,
+    } as any
+
+    return <StyledInput ref={composedRef} {...finalProps} />
   }
-
-  const finalProps = {
-    ...rest,
-    disabled,
-    id,
-    rows,
-    autoCorrect,
-    autoCapitalize,
-    onKeyDown: onSubmitEditing ? handleKeyDown : rest.onKeyDown,
-    onChange: onChangeText ? handleChange : rest.onChange,
-    style: {
-      ...(rest.style as any),
-      ...(placeholderTextColor && {
-        '--t_placeholderColor':
-          theme[placeholderTextColor]?.variable || placeholderTextColor,
-      }),
-      ...(selectionColor && {
-        '--t_selectionColor': theme[selectionColor]?.variable || selectionColor,
-      }),
-    },
-  } as any
-
-  return <StyledInput ref={composedRef} {...finalProps} />
-})
+)
 
 export type InputProps = GetProps<typeof Input>

package/src/TextArea.tsx

@@ -1,36 +1,27 @@
 import { type GetProps, styled } from '@tamagui/web'
 import { Input } from './Input'
-import { defaultStyles, textAreaSizeVariant } from './shared'
+import { defaultStyles, resolveTextAreaSize, textAreaSizeVariant } from './shared'
 
 /**
  * A web-aligned textarea component (multi-line input).
  * @see — Docs https://tamagui.dev/ui/inputs#textarea
  */
-export const TextArea = styled(Input, {
-  name: 'TextArea',
+const TextAreaFrame = styled(Input, {
+  displayName: 'TextArea',
   render: 'textarea',
 
   // this attribute fixes firefox newline issue
   // @ts-ignore
   whiteSpace: 'pre-wrap',
+  height: 'auto',
+  ...defaultStyles,
+  rows: 3,
 
   variants: {
-    unstyled: {
-      false: {
-        height: 'auto',
-        ...defaultStyles,
-        rows: 3,
-      },
-    },
-
-    size: {
-      '...size': textAreaSizeVariant,
-    },
+    size: textAreaSizeVariant,
   } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
 })
 
+export const TextArea = TextAreaFrame.resolve(resolveTextAreaSize)
+
 export type TextAreaProps = GetProps<typeof TextArea>

package/src/shared.tsx

@@ -1,147 +1,94 @@
-import type { SizeVariantSpreadFunction } from '@tamagui/core'
-import { Text } from '@tamagui/core'
-import { getVariableValue, isWeb } from '@tamagui/core'
-import { getButtonSized } from '@tamagui/get-button-sized'
+import { getVariableValue, isWeb, resolveSize, styled } from '@tamagui/core'
 import { getFontSized } from '@tamagui/get-font-sized'
-import { getSpace } from '@tamagui/get-token'
 
+// Structural-only defaults for the unstyled Input behavior primitive.
+// Theme decoration (palette, border, background, font family, hover/focus color
+// styling) lives in the tamagui skin (code/ui/tamagui/src/components/Input.tsx),
+// NOT here. Kept: the size mechanism (functional dimensions), the native outline
+// reset, tab focusability, and the flex-overflow fix.
 export const defaultStyles = {
-  size: '$true',
-  fontFamily: '$body',
-  borderWidth: 1,
+  size: true,
   outlineWidth: 0,
-  color: '$color',
-
-  ...(isWeb
-    ? {
-        tabIndex: 0 as const,
-      }
-    : {
-        focusable: true,
-      }),
-
-  borderColor: '$borderColor',
-  backgroundColor: '$background',
+  tabIndex: 0,
 
   // this fixes a flex bug where it overflows container
   minWidth: 0,
-
-  hoverStyle: {
-    borderColor: '$borderColorHover',
-  },
-
-  focusStyle: {
-    borderColor: '$borderColorFocus',
-  },
-
-  focusVisibleStyle: {
-    outlineColor: '$outlineColor',
-    outlineWidth: 2,
-    outlineStyle: 'solid',
-  },
 } as const
 
-export const inputSizeVariant: SizeVariantSpreadFunction<any> = (
-  val = '$true',
-  extras
-) => {
-  // Check for textarea mode via tag, rows, multiline, or numberOfLines
-  if (
-    extras.props.tag === 'textarea' ||
-    extras.props.rows > 1 ||
-    extras.props.multiline ||
-    extras.props.numberOfLines > 1
-  ) {
-    return textAreaSizeVariant(val, extras)
-  }
-  const buttonStyles = getButtonSized(val, extras)
-  const paddingHorizontal = getSpace(val, {
-    shift: -1,
-    bounds: [2],
-  })
-  const fontStyle = getFontSized(val as any, extras)
-  // lineHeight messes up input on native
-  if (!isWeb && fontStyle) {
-    delete fontStyle['lineHeight']
+export const inputSizeVariant = styled.dynamic<any>((val = true, env) => {
+  const { frame } = resolveSize(val, env)
+  const fontStyle = getFontSized(val as any, env)
+  return {
+    color: fontStyle?.color,
+    fontFamily: fontStyle?.fontFamily,
+    fontSize: fontStyle?.fontSize,
+    fontStyle: fontStyle?.fontStyle,
+    fontWeight: fontStyle?.fontWeight,
+    letterSpacing: fontStyle?.letterSpacing,
+    lineHeight: isWeb ? fontStyle?.lineHeight : undefined,
+    textTransform: fontStyle?.textTransform,
+    ...frame,
   }
+})
+
+export const textAreaSizeVariant = styled.dynamic<any>((val = true, env) => {
   return {
-    ...fontStyle,
-    ...buttonStyles,
-    paddingHorizontal,
+    ...inputSizeVariant(val, env),
+    height: 'auto',
   }
-}
+})
 
-export const textAreaSizeVariant: SizeVariantSpreadFunction<any> = (
-  val = '$true',
-  extras
+export const resolveTextAreaSize = (
+  props: Record<string, any>,
+  env: Parameters<typeof textAreaSizeVariant>[1]
 ) => {
-  const { props } = extras
-  const buttonStyles = getButtonSized(val, extras)
-  const fontStyle = getFontSized(val as any, extras)!
+  const sized = textAreaSizeVariant(props.size ?? true, env)
+  const fontStyle = getFontSized(props.size ?? true, env)
   const lines = props.rows ?? props.numberOfLines
   const height =
-    typeof lines === 'number' ? lines * getVariableValue(fontStyle.lineHeight) : 'auto'
-  // lineHeight messes up input on native
-  if (!isWeb && fontStyle) {
-    delete fontStyle['lineHeight']
-  }
-  const paddingVertical = getSpace(val, {
-    shift: -2,
-    bounds: [2],
-  })
-  const paddingHorizontal = getSpace(val, {
-    shift: -1,
-    bounds: [2],
-  })
+    typeof lines === 'number'
+      ? lines * getVariableValue(fontStyle?.lineHeight)
+      : sized?.height
   return {
-    ...buttonStyles,
-    ...fontStyle,
-    paddingVertical,
-    paddingHorizontal,
+    borderRadius: sized?.borderRadius,
+    color: sized?.color,
+    fontFamily: sized?.fontFamily,
+    fontSize: sized?.fontSize,
+    fontStyle: sized?.fontStyle,
+    fontWeight: sized?.fontWeight,
+    letterSpacing: sized?.letterSpacing,
+    lineHeight: sized?.lineHeight,
+    textTransform: sized?.textTransform,
+    paddingVertical: sized?.paddingVertical,
+    paddingHorizontal: sized?.paddingHorizontal,
     height,
   }
 }
+
+export const resolveMultilineInputSize = (
+  props: Record<string, any>,
+  env: Parameters<typeof textAreaSizeVariant>[1]
+) => {
+  if (!(props.rows > 1 || props.multiline || props.numberOfLines > 1)) return
+  return resolveTextAreaSize(props, env)
+}
 export const INPUT_NAME = 'Input'
 
 export const styledBody = [
   {
     name: INPUT_NAME,
     render: 'input',
+    ...defaultStyles,
     variants: {
-      unstyled: {
-        true: {
-          // reset browser <input>/<textarea> defaults
-          outlineWidth: 0,
-          borderWidth: 0,
-          backgroundColor: 'transparent',
-        },
-        false: defaultStyles,
-      },
-
-      size: {
-        '...size': inputSizeVariant,
-      },
+      size: inputSizeVariant,
 
       disabled: {
         true: {},
       },
     } as const,
-
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
-    },
   },
 
   {
     isInput: true,
-    accept: {
-      placeholderTextColor: 'color',
-      selectionColor: 'color',
-      cursorColor: 'color',
-      selectionHandleColor: 'color',
-      underlineColorAndroid: 'color',
-    } as const,
-
-    validStyles: Text.staticConfig.validStyles,
   },
 ] as const

package/src/types.ts

@@ -1,10 +1,10 @@
 import type { ColorTokens, TextStyle, TamaguiElementMethods } from '@tamagui/web'
-import type { TextInput } from 'react-native'
+import type { TextInput } from '@tamagui/react-native-types'
 import type { InputNativeProps } from './InputNativeProps'
 
 /**
  * Extra props that Input adds on top of the base styled component.
- * Used with .styleable<InputExtraProps>() - the Styleable merge
+ * Annotated on the createStyledHOC render fn - the StyledHOCMergedProps merge
  * (`Omit<BaseProps, keyof CustomProps> & CustomProps`) automatically overrides
  * base event handlers (HTMLDivElement) with these (HTMLInputElement).
  * Consumer-facing InputProps is derived via GetProps<typeof Input>.