@tamagui/input 1.97.0

package/dist/jsx/shared.native.js

@@ -0,0 +1,131 @@
+import { validStyles, stylePropsTextOnly } from "@tamagui/core";
+import { getVariableValue, isWeb } from "@tamagui/core";
+import { getButtonSized } from "@tamagui/get-button-sized";
+import { getFontSized } from "@tamagui/get-font-sized";
+import { getSpace } from "@tamagui/get-token";
+function _define_property(obj, key, value) {
+  return key in obj ? Object.defineProperty(obj, key, {
+    value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
+    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+    }))), ownKeys2.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props(target, source) {
+  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+  }), target;
+}
+var defaultStyles = _object_spread_props(_object_spread({
+  size: "$true",
+  fontFamily: "$body",
+  borderWidth: 1,
+  outlineWidth: 0,
+  color: "$color"
+}, isWeb ? {
+  tabIndex: 0
+} : {
+  focusable: !0
+}), {
+  borderColor: "$borderColor",
+  backgroundColor: "$background",
+  // this fixes a flex bug where it overflows container
+  minWidth: 0,
+  hoverStyle: {
+    borderColor: "$borderColorHover"
+  },
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  focusVisibleStyle: {
+    outlineColor: "$outlineColor",
+    outlineWidth: 2,
+    outlineStyle: "solid"
+  }
+}), inputSizeVariant = function() {
+  var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true", extras = arguments.length > 1 ? arguments[1] : void 0;
+  if (extras.props.multiline || extras.props.numberOfLines > 1)
+    return textAreaSizeVariant(val, extras);
+  var buttonStyles = getButtonSized(val, extras), paddingHorizontal = getSpace(val, {
+    shift: -1,
+    bounds: [
+      2
+    ]
+  }), fontStyle = getFontSized(val, extras);
+  return !isWeb && fontStyle && delete fontStyle.lineHeight, _object_spread_props(_object_spread({}, fontStyle, buttonStyles), {
+    paddingHorizontal
+  });
+}, textAreaSizeVariant = function() {
+  var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true", extras = arguments.length > 1 ? arguments[1] : void 0, props = extras.props, buttonStyles = getButtonSized(val, extras), fontStyle = getFontSized(val, extras), _props_rows, lines = (_props_rows = props.rows) !== null && _props_rows !== void 0 ? _props_rows : props.numberOfLines, height = typeof lines == "number" ? lines * getVariableValue(fontStyle.lineHeight) : "auto", paddingVertical = getSpace(val, {
+    shift: -2,
+    bounds: [
+      2
+    ]
+  }), paddingHorizontal = getSpace(val, {
+    shift: -1,
+    bounds: [
+      2
+    ]
+  });
+  return _object_spread_props(_object_spread({}, buttonStyles, fontStyle), {
+    paddingVertical,
+    paddingHorizontal,
+    height
+  });
+}, INPUT_NAME = "Input", styledBody = [
+  {
+    name: INPUT_NAME,
+    tag: "input",
+    variants: {
+      unstyled: {
+        false: defaultStyles
+      },
+      size: {
+        "...size": inputSizeVariant
+      },
+      disabled: {
+        true: {}
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    }
+  },
+  {
+    isInput: !0,
+    accept: {
+      placeholderTextColor: "color",
+      selectionColor: "color"
+    },
+    validStyles: _object_spread({}, validStyles, stylePropsTextOnly)
+  }
+];
+export {
+  INPUT_NAME,
+  defaultStyles,
+  inputSizeVariant,
+  styledBody,
+  textAreaSizeVariant
+};
+//# sourceMappingURL=shared.js.map

package/dist/jsx/shared.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/Users/n8/tamagui/packages/input/src/shared.tsx"],
+  "mappings": "AACA,SAASA,aAAaC,0BAA0B;AAChD,SAASC,kBAAkBC,aAAa;AACxC,SAASC,sBAAsB;AAC/B,SAASC,oBAAoB;AAC7B,SAASC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAElB,IAAMC,gBAAgB,qBAAA,eAAA;EAC3BC,MAAM;EACNC,YAAY;EACZC,aAAa;EACbC,cAAc;EACdC,OAAO;GAEHT,QACA;EACEU,UAAU;AACZ,IACA;EACEC,WAAW;AACb,CAAA,GAAA;EAEJC,aAAa;EACbC,iBAAiB;;EAGjBC,UAAU;EAEVC,YAAY;IACVH,aAAa;EACf;EAEAI,YAAY;IACVJ,aAAa;EACf;EAEAK,mBAAmB;IACjBC,cAAc;IACdV,cAAc;IACdW,cAAc;EAChB;IAGWC,mBAAmD,WAAA;MAC9DC,MAAAA,UAAAA,SAAAA,KAAAA,UAAAA,CAAAA,MAAAA,SAAAA,UAAAA,CAAAA,IAAM,SACNC,SAAAA,UAAAA,SAAAA,IAAAA,UAAAA,CAAAA,IAAAA;AAEA,MAAIA,OAAOC,MAAMC,aAAaF,OAAOC,MAAME,gBAAgB;AACzD,WAAOC,oBAAoBL,KAAKC,MAAAA;AAElC,MAAMK,eAAe1B,eAAeoB,KAAKC,MAAAA,GACnCM,oBAAoBzB,SAASkB,KAAK;IACtCQ,OAAO;IACPC,QAAQ;MAAC;;EACX,CAAA,GACMC,YAAY7B,aAAamB,KAAYC,MAAAA;AAE3C,SAAI,CAACtB,SAAS+B,aACZ,OAAOA,UAAU,YAEZ,qBAAA,eAAA,CAAA,GACFA,WACAJ,YAAAA,GAAAA;IACHC;;AAEJ,GAEaF,sBAAsD,WAAA;MACjEL,MAAAA,UAAAA,SAAAA,KAAAA,UAAAA,CAAAA,MAAAA,SAAAA,UAAAA,CAAAA,IAAM,SACNC,SAAAA,UAAAA,SAAAA,IAAAA,UAAAA,CAAAA,IAAAA,QAEQC,QAAUD,OAAVC,OACFI,eAAe1B,eAAeoB,KAAKC,MAAAA,GACnCS,YAAY7B,aAAamB,KAAYC,MAAAA,GAC7BC,aAARS,SAAQT,cAAAA,MAAMU,UAAI,QAAVV,gBAAAA,SAAAA,cAAcA,MAAME,eAC5BS,SACJ,OAAOF,SAAU,WAAWA,QAAQjC,iBAAiBgC,UAAUI,UAAU,IAAI,QACzEC,kBAAkBjC,SAASkB,KAAK;IACpCQ,OAAO;IACPC,QAAQ;MAAC;;EACX,CAAA,GACMF,oBAAoBzB,SAASkB,KAAK;IACtCQ,OAAO;IACPC,QAAQ;MAAC;;EACX,CAAA;AACA,SAAO,qBAAA,eAAA,CAAA,GACFH,cACAI,SAAAA,GAAAA;IACHK;IACAR;IACAM;;AAEJ,GACaG,aAAa,SAEbC,aAAa;EACxB;IACEC,MAAMF;IACNG,KAAK;IACLC,UAAU;MACRC,UAAU;QACRC,OAAOvC;MACT;MAEAC,MAAM;QACJ,WAAWe;MACb;MAEAwB,UAAU;QACRC,MAAM,CAAC;MACT;IACF;IAEAC,iBAAiB;MACfJ,UAAUK,QAAQC,IAAIC,qBAAqB;IAC7C;EACF;EACA;IACEC,SAAS;IACTC,QAAQ;MACNC,sBAAsB;MACtBC,gBAAgB;IAClB;IACAxD,aAAa,eAAA,CAAA,GACRA,aACAC,kBAAAA;EAEP;;",
+  "names": ["validStyles", "stylePropsTextOnly", "getVariableValue", "isWeb", "getButtonSized", "getFontSized", "getSpace", "defaultStyles", "size", "fontFamily", "borderWidth", "outlineWidth", "color", "tabIndex", "focusable", "borderColor", "backgroundColor", "minWidth", "hoverStyle", "focusStyle", "focusVisibleStyle", "outlineColor", "outlineStyle", "inputSizeVariant", "val", "extras", "props", "multiline", "numberOfLines", "textAreaSizeVariant", "buttonStyles", "paddingHorizontal", "shift", "bounds", "fontStyle", "lines", "rows", "height", "lineHeight", "paddingVertical", "INPUT_NAME", "styledBody", "name", "tag", "variants", "unstyled", "false", "disabled", "true", "defaultVariants", "process", "env", "TAMAGUI_HEADLESS", "isInput", "accept", "placeholderTextColor", "selectionColor"]
+}

package/dist/jsx/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/jsx/types.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": [],
+  "mappings": "",
+  "names": []
+}

package/dist/jsx/types.native.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/jsx/types.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@tamagui/input",
+  "version": "1.97.0",
+  "sideEffects": [
+    "*.css"
+  ],
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "lint": "../../node_modules/.bin/biome check src",
+    "lint:fix": "../../node_modules/.bin/biome check --apply-unsafe src",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "react-native": "./dist/cjs/index.native.js"
+    }
+  },
+  "dependencies": {
+    "@tamagui/font-size": "1.97.0",
+    "@tamagui/get-button-sized": "1.97.0",
+    "@tamagui/helpers": "1.97.0",
+    "@tamagui/helpers-tamagui": "1.97.0",
+    "@tamagui/stacks": "1.97.0",
+    "@tamagui/text": "1.97.0",
+    "@tamagui/web": "1.97.0"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "1.97.0",
+    "react": "^18.2.0",
+    "vitest": "^0.34.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

package/src/Input.native.tsx

@@ -0,0 +1,148 @@
+import { styled, useComposedRefs } from '@tamagui/core'
+import { registerFocusable } from '@tamagui/focusable'
+import React, { useEffect } from 'react'
+import type { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native'
+import { TextInput } from 'react-native'
+import { styledBody } from './shared'
+import type { InputProps } from './types'
+const StyledInput = styled(TextInput, styledBody[0], styledBody[1])
+
+export const Input = StyledInput.styleable<InputProps>((inProps, forwardedRef) => {
+  const {
+    // some of destructed props are just to avoid passing them to ...rest because they are not in native.
+    type,
+    //@ts-ignore
+    dirname,
+    max,
+    min,
+    minLength,
+    multiple,
+    name,
+    required,
+    step,
+    disabled,
+    id,
+    caretColor,
+    onChange,
+    onInput,
+    rows,
+    enterKeyHint,
+    returnKeyType,
+    onKeyDown,
+    inputMode,
+    tag,
+    ...rest
+  } = inProps
+
+  const ref = React.useRef<HTMLInputElement>(null)
+
+  const composedRefs = useComposedRefs<any>(forwardedRef, ref)
+
+  // TODO: later move most of the logic to the core package
+
+  let secureTextEntry = false
+  let cursorColor = caretColor
+  let _returnKeyType = returnKeyType
+  let _enterKeyHint = enterKeyHint
+  if (enterKeyHint === 'go') {
+    _returnKeyType = 'go'
+    _enterKeyHint = undefined
+  }
+
+  let _inputMode = inputMode
+  if (type === 'email') {
+    _inputMode = 'email'
+  } else if (type === 'tel') {
+    _inputMode = 'tel'
+  } else if (type === 'search') {
+    _inputMode = 'search'
+  } else if (type === 'url') {
+    _inputMode = 'url'
+  } else if (type === 'password') {
+    secureTextEntry = true
+    _inputMode = 'text'
+  } else if (type === 'number') {
+    _inputMode = 'numeric'
+  } else {
+    _inputMode = 'text'
+  }
+
+  let showSoftInputOnFocus = true
+  if (inputMode === 'none') {
+    showSoftInputOnFocus = false
+  }
+
+  const finalProps = {
+    ...rest,
+    inputMode: _inputMode,
+    showSoftInputOnFocus,
+    disabled,
+    id,
+    cursorColor,
+    enterKeyHint: _enterKeyHint,
+    returnKeyType: _returnKeyType,
+    secureTextEntry,
+    numberOfLines: rows || rest.numberOfLines,
+  } as any
+
+  if (tag === 'textarea') {
+    finalProps.multiline = true
+  }
+
+  if (onKeyDown) {
+    finalProps.onKeyPress = (e) => {
+      const { key } = e.nativeEvent
+      if (
+        key === 'Backspace' ||
+        (tag === 'textarea' && key === 'Enter') ||
+        key.length === 1
+      ) {
+        onKeyDown({
+          key,
+          type: 'keydown',
+        } as any)
+      }
+    }
+    finalProps.onSubmitEditing = (e) => {
+      onKeyDown({
+        key: 'Enter',
+        type: 'keydown',
+      } as any)
+    }
+  }
+
+  if (onChange || onInput) {
+    finalProps.onChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
+      const { text } = e.nativeEvent
+      if (onChange) {
+        onChange({
+          target: {
+            value: text,
+          },
+          type: 'change',
+        } as any)
+      }
+      if (onInput != null) {
+        onInput({
+          target: {
+            value: text,
+          },
+          type: 'input',
+        } as any)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!id) return
+    if (disabled) return
+
+    return registerFocusable(id, {
+      focusAndSelect: () => {
+        ref.current?.focus()
+      },
+      focus: () => {},
+    })
+  }, [id, disabled])
+  return <StyledInput onChange={(e) => {}} ref={composedRefs} {...finalProps} />
+})

package/src/Input.tsx

@@ -0,0 +1,142 @@
+import { View, styled, useComposedRefs, useEvent, useTheme } from '@tamagui/core'
+import { registerFocusable } from '@tamagui/focusable'
+import React, { useEffect } from 'react'
+import { styledBody } from './shared'
+import type { InputProps } from './types'
+const StyledInput = styled(View, styledBody[0], styledBody[1])
+
+export const Input = StyledInput.styleable<InputProps>((inProps, forwardedRef) => {
+  const {
+    // some of destructed props are just to avoid passing them to ...rest because they are not in web.
+    allowFontScaling,
+    selectTextOnFocus,
+    showSoftInputOnFocus,
+    textContentType,
+    passwordRules,
+    textBreakStrategy,
+    underlineColorAndroid,
+    selection,
+    lineBreakStrategyIOS,
+    returnKeyLabel,
+    disabled,
+    onSubmitEditing,
+    caretHidden,
+    clearButtonMode,
+    clearTextOnFocus,
+    contextMenuHidden,
+    dataDetectorTypes,
+    id,
+    enablesReturnKeyAutomatically,
+    importantForAutofill,
+    inlineImageLeft,
+    inlineImagePadding,
+    inputAccessoryViewID,
+    keyboardAppearance,
+    keyboardType,
+    cursorColor,
+    disableFullscreenUI,
+    editable,
+    maxFontSizeMultiplier,
+    multiline,
+    numberOfLines,
+    onChangeText,
+    onContentSizeChange,
+    onEndEditing,
+    onScroll,
+    onSelectionChange,
+    caretColor,
+    placeholderTextColor,
+    blurOnSubmit,
+    enterKeyHint,
+    returnKeyType,
+    rejectResponderTermination,
+    scrollEnabled,
+    secureTextEntry,
+    selectionColor,
+    inputMode,
+    ...rest
+  } = inProps
+
+  const ref = React.useRef<HTMLInputElement>(null)
+  const theme = useTheme()
+
+  const composedRefs = useComposedRefs(forwardedRef, ref)
+
+  const _onSelectionChange = useEvent(() => {
+    const start = ref.current?.selectionStart ?? 0
+    const end = ref.current?.selectionEnd ?? 0
+    onSelectionChange?.({
+      nativeEvent: {
+        selection: {
+          end,
+          start,
+        },
+      },
+    } as any)
+  })
+
+  useEffect(() => {
+    if (onSelectionChange) {
+      ref.current?.addEventListener('selectionchange', _onSelectionChange)
+      return () => {
+        ref.current?.removeEventListener('selectionchange', _onSelectionChange)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (selection) {
+      ref.current?.setSelectionRange(selection.start || null, selection.end || null)
+    }
+  }, [selection?.start, selection?.end])
+
+  const finalProps = {
+    ...rest,
+    inputMode,
+    disabled,
+    caretColor,
+    id,
+    enterKeyHint,
+    style: {
+      ...(rest.style as any),
+      ...(placeholderTextColor && {
+        '--placeholderColor':
+          theme[placeholderTextColor]?.variable || placeholderTextColor,
+      }),
+      ...(selectionColor && {
+        '--selectionColor': theme[selectionColor]?.variable || selectionColor,
+      }),
+    },
+  } as any
+
+  useEffect(() => {
+    if (!id) return
+    if (disabled) return
+
+    return registerFocusable(id, {
+      focusAndSelect: () => {
+        ref.current?.focus()
+      },
+      focus: () => {},
+    })
+  }, [id, disabled])
+
+  return (
+    <>
+      {process.env.TAMAGUI_TARGET === 'web' && (
+        <style>
+          {`
+      input::selection, textarea::selection {
+        background-color: var(--selectionBackground) !important;
+      }
+      
+      input::placeholder, textarea::placeholder {
+        color: var(--placeholderColor) !important;
+      }
+      `}
+        </style>
+      )}
+      <StyledInput ref={composedRefs} {...finalProps} />
+    </>
+  )
+})

package/src/TextArea.tsx

@@ -0,0 +1,27 @@
+import { styled } from '@tamagui/web'
+import { Input } from './Input'
+import { defaultStyles, textAreaSizeVariant } from './shared'
+export const TextArea = styled(Input, {
+  name: 'TextArea',
+  tag: 'textarea',
+  // this attribute fixes firefox newline issue
+  whiteSpace: 'pre-wrap',
+
+  variants: {
+    unstyled: {
+      false: {
+        height: 'auto',
+        ...defaultStyles,
+        numberOfLines: 3,
+      },
+    },
+
+    size: {
+      '...size': textAreaSizeVariant,
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === '1',
+  },
+})

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './Input'
+export * from './TextArea'

package/src/shared.tsx

@@ -0,0 +1,129 @@
+import type { SizeVariantSpreadFunction } from '@tamagui/core'
+import { validStyles, stylePropsTextOnly } from '@tamagui/core'
+import { getVariableValue, isWeb } from '@tamagui/core'
+import { getButtonSized } from '@tamagui/get-button-sized'
+import { getFontSized } from '@tamagui/get-font-sized'
+import { getSpace } from '@tamagui/get-token'
+
+export const defaultStyles = {
+  size: '$true',
+  fontFamily: '$body',
+  borderWidth: 1,
+  outlineWidth: 0,
+  color: '$color',
+
+  ...(isWeb
+    ? {
+        tabIndex: 0,
+      }
+    : {
+        focusable: true,
+      }),
+
+  borderColor: '$borderColor',
+  backgroundColor: '$background',
+
+  // 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
+) => {
+  if (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']
+  }
+  return {
+    ...fontStyle,
+    ...buttonStyles,
+    paddingHorizontal,
+  }
+}
+
+export const textAreaSizeVariant: SizeVariantSpreadFunction<any> = (
+  val = '$true',
+  extras
+) => {
+  const { props } = extras
+  const buttonStyles = getButtonSized(val, extras)
+  const fontStyle = getFontSized(val as any, extras)!
+  const lines = props.rows ?? props.numberOfLines
+  const height =
+    typeof lines === 'number' ? lines * getVariableValue(fontStyle.lineHeight) : 'auto'
+  const paddingVertical = getSpace(val, {
+    shift: -2,
+    bounds: [2],
+  })
+  const paddingHorizontal = getSpace(val, {
+    shift: -1,
+    bounds: [2],
+  })
+  return {
+    ...buttonStyles,
+    ...fontStyle,
+    paddingVertical,
+    paddingHorizontal,
+    height,
+  }
+}
+export const INPUT_NAME = 'Input'
+
+export const styledBody = [
+  {
+    name: INPUT_NAME,
+    tag: 'input',
+    variants: {
+      unstyled: {
+        false: defaultStyles,
+      },
+
+      size: {
+        '...size': inputSizeVariant,
+      },
+
+      disabled: {
+        true: {},
+      },
+    } as const,
+
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === '1',
+    },
+  },
+  {
+    isInput: true,
+    accept: {
+      placeholderTextColor: 'color',
+      selectionColor: 'color',
+    } as const,
+    validStyles: {
+      ...validStyles,
+      ...stylePropsTextOnly,
+    },
+  },
+]