@tamagui/input 2.7.7 → 3.0.0-beta.637.1

package/src/Input.tsx

@@ -1,4 +1,4 @@
-import { type GetProps, View, styled, useTheme } from '@tamagui/core'
+import { createStyledHOC, type GetProps, View, styled, useTheme } from '@tamagui/core'
 import { registerFocusable } from '@tamagui/focusable'
 import { useWebRef } from '@tamagui/element'
 import React from 'react'
@@ -11,163 +11,173 @@ const StyledInput = styled(View, styledBody[0], styledBody[1])
  * 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,
+      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,
+            },
           },
-        },
+        })
+      }
+
+      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,
+      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} />
   }
-
-  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

@@ -7,30 +7,22 @@ import { defaultStyles, textAreaSizeVariant } from './shared'
  * @see — Docs https://tamagui.dev/ui/inputs#textarea
  */
 export const TextArea = styled(Input, {
-  name: 'TextArea',
+  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,
+      true: textAreaSizeVariant,
+      Size: textAreaSizeVariant,
     },
   } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
 })
 
 export type TextAreaProps = GetProps<typeof TextArea>

package/src/shared.tsx

@@ -1,50 +1,68 @@
-import type { SizeVariantSpreadFunction } from '@tamagui/core'
+import type { SizeVariantSpreadFunction, VariantSpreadExtras } from '@tamagui/core'
 import { Text } from '@tamagui/core'
-import { getVariableValue, isWeb } from '@tamagui/core'
-import { getButtonSized } from '@tamagui/get-button-sized'
+import { getVariableValue, isWeb, resolveTokenSize } 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,
+} as const
 
-  hoverStyle: {
-    borderColor: '$borderColorHover',
-  },
+const resolveInputFrame = (val: any, extras: VariantSpreadExtras<any>) =>
+  resolveTokenSize(val, { tokens: extras.tokens, font: extras.font! }).frame
 
-  focusStyle: {
-    borderColor: '$borderColorFocus',
-  },
+const inputSizeKeys = [
+  '0',
+  '0-25',
+  '0-5',
+  '0-75',
+  '1',
+  '1-5',
+  '2',
+  '2-5',
+  '3',
+  '3-5',
+  '4',
+  '4-5',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  '11',
+  '12',
+  '13',
+  '14',
+  '15',
+  '16',
+  '17',
+  '18',
+  '19',
+  '20',
+] as const
 
-  focusVisibleStyle: {
-    outlineColor: '$outlineColor',
-    outlineWidth: 2,
-    outlineStyle: 'solid',
-  },
-} as const
+const getInputPadding = (val: any, extras: VariantSpreadExtras<any>, steps: 1 | 2) => {
+  if (typeof val === 'number') {
+    return steps === 1
+      ? Math.max(0, Math.round(val * 0.6 - 12))
+      : Math.max(0, Math.round(val * 0.52 - 11.5))
+  }
+  const key = val === true ? '4' : val
+  const index = inputSizeKeys.indexOf(key)
+  return extras.tokens.space[inputSizeKeys[Math.max(0, index - steps)]]
+}
 
-export const inputSizeVariant: SizeVariantSpreadFunction<any> = (
-  val = '$true',
-  extras
-) => {
+export const inputSizeVariant: SizeVariantSpreadFunction<any> = (val = true, extras) => {
   // Check for textarea mode via tag, rows, multiline, or numberOfLines
   if (
     extras.props.tag === 'textarea' ||
@@ -54,11 +72,7 @@ export const inputSizeVariant: SizeVariantSpreadFunction<any> = (
   ) {
     return textAreaSizeVariant(val, extras)
   }
-  const buttonStyles = getButtonSized(val, extras)
-  const paddingHorizontal = getSpace(val, {
-    shift: -1,
-    bounds: [2],
-  })
+  const frame = resolveInputFrame(val, extras)
   const fontStyle = getFontSized(val as any, extras)
   // lineHeight messes up input on native
   if (!isWeb && fontStyle) {
@@ -66,17 +80,18 @@ export const inputSizeVariant: SizeVariantSpreadFunction<any> = (
   }
   return {
     ...fontStyle,
-    ...buttonStyles,
-    paddingHorizontal,
+    height: frame.size,
+    borderRadius: frame.radius,
+    paddingHorizontal: getInputPadding(val, extras, 1),
   }
 }
 
 export const textAreaSizeVariant: SizeVariantSpreadFunction<any> = (
-  val = '$true',
+  val = true,
   extras
 ) => {
   const { props } = extras
-  const buttonStyles = getButtonSized(val, extras)
+  const frame = resolveInputFrame(val, extras)
   const fontStyle = getFontSized(val as any, extras)!
   const lines = props.rows ?? props.numberOfLines
   const height =
@@ -85,19 +100,11 @@ export const textAreaSizeVariant: SizeVariantSpreadFunction<any> = (
   if (!isWeb && fontStyle) {
     delete fontStyle['lineHeight']
   }
-  const paddingVertical = getSpace(val, {
-    shift: -2,
-    bounds: [2],
-  })
-  const paddingHorizontal = getSpace(val, {
-    shift: -1,
-    bounds: [2],
-  })
   return {
-    ...buttonStyles,
+    borderRadius: frame.radius,
     ...fontStyle,
-    paddingVertical,
-    paddingHorizontal,
+    paddingVertical: getInputPadding(val, extras, 2),
+    paddingHorizontal: getInputPadding(val, extras, 1),
     height,
   }
 }
@@ -107,29 +114,17 @@ 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,
+        true: inputSizeVariant,
+        Size: inputSizeVariant,
       },
 
       disabled: {
         true: {},
       },
     } as const,
-
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
-    },
   },
 
   {

package/src/types.ts

@@ -4,7 +4,7 @@ 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>.