@tamagui/text 1.0.1-beta.21 → 1.0.1-beta.210

package/dist/jsx/.tamagui-dynamic-eval-Paragraph.js.js

@@ -0,0 +1,10 @@
+import { styled } from "@tamagui/core";
+import { SizableText } from "./SizableText";
+const Paragraph = styled(SizableText, {
+  name: "Paragraph",
+  tag: "p",
+  selectable: true,
+  cursor: "text"
+});
+export { Paragraph };
+//# sourceMappingURL=Paragraph.js.map

package/dist/jsx/.tamagui-dynamic-eval-SizableText.js.js

@@ -0,0 +1,15 @@
+import { Text, getFont, styled } from "@tamagui/core";
+const SizableText = styled(Text, {
+  name: "SizableText",
+  fontFamily: "$body",
+  variants: {
+    size: getFont
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+}, {
+  inlineWhenUnflattened: /* @__PURE__ */new Set(["fontFamily"])
+});
+export { SizableText };
+//# sourceMappingURL=SizableText.js.map

package/dist/jsx/Headings.js

@@ -0,0 +1,50 @@
+import { styled } from "@tamagui/core";
+import { Paragraph } from "./Paragraph";
+const Heading = styled(Paragraph, {
+  tag: "span",
+  name: "Heading",
+  accessibilityRole: "header",
+  fontFamily: "$heading",
+  size: "$8",
+  margin: 0
+});
+const H1 = styled(Heading, {
+  name: "H1",
+  tag: "h1",
+  size: "$10"
+});
+const H2 = styled(Heading, {
+  name: "H2",
+  tag: "h2",
+  size: "$9"
+});
+const H3 = styled(Heading, {
+  name: "H3",
+  tag: "h3",
+  size: "$8"
+});
+const H4 = styled(Heading, {
+  name: "H4",
+  tag: "h4",
+  size: "$7"
+});
+const H5 = styled(Heading, {
+  name: "H5",
+  tag: "h5",
+  size: "$6"
+});
+const H6 = styled(Heading, {
+  name: "H6",
+  tag: "h6",
+  size: "$5"
+});
+export {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Heading
+};
+//# sourceMappingURL=Headings.js.map

package/dist/jsx/Headings.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Headings.tsx"],
+  "sourcesContent": ["import { styled } from '@tamagui/core'\n\nimport { Paragraph } from './Paragraph'\n\nexport const Heading = styled(Paragraph, {\n  tag: 'span',\n  name: 'Heading',\n  accessibilityRole: 'header',\n  fontFamily: '$heading',\n  size: '$8',\n  margin: 0,\n})\n\nexport const H1 = styled(Heading, {\n  name: 'H1',\n  tag: 'h1',\n  size: '$10',\n})\n\nexport const H2 = styled(Heading, {\n  name: 'H2',\n  tag: 'h2',\n  size: '$9',\n})\n\nexport const H3 = styled(Heading, {\n  name: 'H3',\n  tag: 'h3',\n  size: '$8',\n})\n\nexport const H4 = styled(Heading, {\n  name: 'H4',\n  tag: 'h4',\n  size: '$7',\n})\n\nexport const H5 = styled(Heading, {\n  name: 'H5',\n  tag: 'h5',\n  size: '$6',\n})\n\nexport const H6 = styled(Heading, {\n  name: 'H6',\n  tag: 'h6',\n  size: '$5',\n})\n"],
+  "mappings": "AAAA,SAAS,cAAc;AAEvB,SAAS,iBAAiB;AAEnB,MAAM,UAAU,OAAO,WAAW;AAAA,EACvC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AAEM,MAAM,KAAK,OAAO,SAAS;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR,CAAC;AAEM,MAAM,KAAK,OAAO,SAAS;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR,CAAC;AAEM,MAAM,KAAK,OAAO,SAAS;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR,CAAC;AAEM,MAAM,KAAK,OAAO,SAAS;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR,CAAC;AAEM,MAAM,KAAK,OAAO,SAAS;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR,CAAC;AAEM,MAAM,KAAK,OAAO,SAAS;AAAA,EAChC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR,CAAC;",
+  "names": []
+}

package/dist/jsx/Paragraph.js

@@ -9,3 +9,4 @@ const Paragraph = styled(SizableText, {
 export {
   Paragraph
 };
+//# sourceMappingURL=Paragraph.js.map

package/dist/jsx/Paragraph.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Paragraph.tsx"],
+  "sourcesContent": ["import { PropTypes, styled } from '@tamagui/core'\n\nimport { SizableText } from './SizableText'\n\nexport const Paragraph = styled(SizableText, {\n  name: 'Paragraph',\n  tag: 'p',\n  selectable: true,\n  cursor: 'text',\n})\n\nexport type ParagraphProps = PropTypes<typeof Paragraph>\n"],
+  "mappings": "AAAA,SAAoB,cAAc;AAElC,SAAS,mBAAmB;AAErB,MAAM,YAAY,OAAO,aAAa;AAAA,EAC3C,MAAM;AAAA,EACN,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;",
+  "names": []
+}

package/dist/jsx/SizableText.js

@@ -1,9 +1,10 @@
-import { Text, getTextSize, styled } from "@tamagui/core";
+import { Text, styled } from "@tamagui/core";
+import { getFontSized } from "@tamagui/get-font-sized";
 const SizableText = styled(Text, {
   name: "SizableText",
   fontFamily: "$body",
   variants: {
-    size: getTextSize
+    size: getFontSized
   },
   defaultVariants: {
     size: "$4"
@@ -12,3 +13,4 @@ const SizableText = styled(Text, {
 export {
   SizableText
 };
+//# sourceMappingURL=SizableText.js.map

package/dist/jsx/SizableText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SizableText.tsx"],
+  "sourcesContent": ["import { GetProps, Text, styled } from '@tamagui/core'\nimport { getFontSized } from '@tamagui/get-font-sized'\n\nexport const SizableText = styled(Text, {\n  name: 'SizableText',\n  fontFamily: '$body',\n\n  variants: {\n    size: getFontSized,\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport type SizableTextProps = GetProps<typeof SizableText>\n"],
+  "mappings": "AAAA,SAAmB,MAAM,cAAc;AACvC,SAAS,oBAAoB;AAEtB,MAAM,cAAc,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -1,2 +1,6 @@
 export * from "./SizableText";
 export * from "./Paragraph";
+export * from "./Headings";
+export * from "./wrapChildrenInText";
+export * from "./types";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export * from './SizableText'\nexport * from './Paragraph'\nexport * from './Headings'\nexport * from './wrapChildrenInText'\nexport * from './types'\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/jsx/types.js

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

package/dist/jsx/wrapChildrenInText.js

@@ -0,0 +1,64 @@
+import React from "react";
+function wrapChildrenInText(TextComponent, propsIn) {
+  const {
+    children,
+    textProps,
+    size,
+    noTextWrap,
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    textAlign
+  } = propsIn;
+  if (noTextWrap || !children) {
+    return children;
+  }
+  const allChildren = React.Children.toArray(children);
+  const nextChildren = [];
+  let lastIsString = false;
+  const props = {};
+  if (color)
+    props.color = color;
+  if (fontFamily)
+    props.fontFamily = fontFamily;
+  if (fontSize)
+    props.fontSize = fontSize;
+  if (fontWeight)
+    props.fontWeight = fontWeight;
+  if (letterSpacing)
+    props.letterSpacing = letterSpacing;
+  if (textAlign)
+    props.textAlign = textAlign;
+  if (size)
+    props.size = size;
+  function concatStringChildren() {
+    if (!lastIsString)
+      return;
+    const index = nextChildren.length - 1;
+    const childrenStrings = nextChildren[index];
+    nextChildren[index] = <TextComponent key={index} {...props} {...textProps}>{childrenStrings}</TextComponent>;
+  }
+  for (const child of allChildren) {
+    const last = nextChildren[nextChildren.length - 1];
+    const isString = typeof child === "string";
+    if (isString) {
+      if (lastIsString) {
+        last.push(child);
+      } else {
+        nextChildren.push([child]);
+      }
+    } else {
+      concatStringChildren();
+      nextChildren.push(child);
+    }
+    lastIsString = isString;
+  }
+  concatStringChildren();
+  return nextChildren;
+}
+export {
+  wrapChildrenInText
+};
+//# sourceMappingURL=wrapChildrenInText.js.map

package/dist/jsx/wrapChildrenInText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/wrapChildrenInText.tsx"],
+  "sourcesContent": ["import type { SizeTokens } from '@tamagui/core'\nimport React from 'react'\n\nimport { TextParentStyles } from './types'\n\ntype Props = TextParentStyles & {\n  children?: React.ReactNode\n  size?: SizeTokens\n}\n\nexport function wrapChildrenInText(TextComponent: any, propsIn: Props) {\n  const {\n    children,\n    textProps,\n    size,\n    noTextWrap,\n    color,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    letterSpacing,\n    textAlign,\n  } = propsIn\n\n  if (noTextWrap || !children) {\n    return children\n  }\n\n  // in the case of using variables, like so:\n  // <ListItem>Hello, {name}</ListItem>\n  // it gives us props.children as ['Hello, ', 'name']\n  // but we don't want to wrap multiple SizableText around each part\n  // so we group them\n  const allChildren = React.Children.toArray(children)\n  const nextChildren: any[] = []\n  let lastIsString = false\n  const props: any = {}\n  // to avoid setting undefined\n  if (color) props.color = color\n  if (fontFamily) props.fontFamily = fontFamily\n  if (fontSize) props.fontSize = fontSize\n  if (fontWeight) props.fontWeight = fontWeight\n  if (letterSpacing) props.letterSpacing = letterSpacing\n  if (textAlign) props.textAlign = textAlign\n  if (size) props.size = size\n\n  function concatStringChildren() {\n    if (!lastIsString) return\n    const index = nextChildren.length - 1\n    const childrenStrings = nextChildren[index]\n    nextChildren[index] = (\n      <TextComponent key={index} {...props} {...textProps}>\n        {childrenStrings}\n      </TextComponent>\n    )\n  }\n\n  for (const child of allChildren) {\n    const last = nextChildren[nextChildren.length - 1]\n    const isString = typeof child === 'string'\n    if (isString) {\n      if (lastIsString) {\n        last.push(child)\n      } else {\n        nextChildren.push([child])\n      }\n    } else {\n      concatStringChildren()\n      nextChildren.push(child)\n    }\n    lastIsString = isString\n  }\n  concatStringChildren()\n\n  return nextChildren\n}\n"],
+  "mappings": "AACA,OAAO,WAAW;AASX,SAAS,mBAAmB,eAAoB,SAAgB;AACrE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,MAAI,cAAc,CAAC,UAAU;AAC3B,WAAO;AAAA,EACT;AAOA,QAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ;AACnD,QAAM,eAAsB,CAAC;AAC7B,MAAI,eAAe;AACnB,QAAM,QAAa,CAAC;AAEpB,MAAI;AAAO,UAAM,QAAQ;AACzB,MAAI;AAAY,UAAM,aAAa;AACnC,MAAI;AAAU,UAAM,WAAW;AAC/B,MAAI;AAAY,UAAM,aAAa;AACnC,MAAI;AAAe,UAAM,gBAAgB;AACzC,MAAI;AAAW,UAAM,YAAY;AACjC,MAAI;AAAM,UAAM,OAAO;AAEvB,WAAS,uBAAuB;AAC9B,QAAI,CAAC;AAAc;AACnB,UAAM,QAAQ,aAAa,SAAS;AACpC,UAAM,kBAAkB,aAAa;AACrC,iBAAa,SACX,CAAC,cAAc,KAAK,WAAW,WAAW,YACvC,gBACH,EAFC;AAAA,EAIL;AAEA,aAAW,SAAS,aAAa;AAC/B,UAAM,OAAO,aAAa,aAAa,SAAS;AAChD,UAAM,WAAW,OAAO,UAAU;AAClC,QAAI,UAAU;AACZ,UAAI,cAAc;AAChB,aAAK,KAAK,KAAK;AAAA,MACjB,OAAO;AACL,qBAAa,KAAK,CAAC,KAAK,CAAC;AAAA,MAC3B;AAAA,IACF,OAAO;AACL,2BAAqB;AACrB,mBAAa,KAAK,KAAK;AAAA,IACzB;AACA,mBAAe;AAAA,EACjB;AACA,uBAAqB;AAErB,SAAO;AACT;",
+  "names": []
+}

package/dist/jsx/wrapChildrenInText.test.js

@@ -0,0 +1,29 @@
+import { expect, test } from "vitest";
+import { wrapChildrenInText } from "./wrapChildrenInText";
+const Comp = () => {
+};
+const re = <div data-id={Math.random()} />;
+const reID = re.props["data-id"];
+test("should wrap all string children, not wrap others", () => {
+  const out = wrapChildrenInText(Comp, {
+    children: [re, "a", "b", re, "c", re, "d"]
+  });
+  expect(out[0].props["data-id"]).toBe(reID);
+  expect(out[1].type).toBe(Comp);
+  expect(out[1].props.children).toStrictEqual(["a", "b"]);
+  expect(out[2].props["data-id"]).toBe(reID);
+  expect(out[3].type).toBe(Comp);
+  expect(out[3].props.children).toStrictEqual(["c"]);
+  expect(out[4].props["data-id"]).toBe(reID);
+  expect(out[5].type).toBe(Comp);
+  expect(out[5].props.children).toStrictEqual(["d"]);
+});
+test("should first child string", () => {
+  const out = wrapChildrenInText(Comp, {
+    children: ["a", re]
+  });
+  expect(out[0].type).toBe(Comp);
+  expect(out[0].props.children).toStrictEqual(["a"]);
+  expect(out[1].props["data-id"]).toBe(reID);
+});
+//# sourceMappingURL=wrapChildrenInText.test.js.map

package/dist/jsx/wrapChildrenInText.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/wrapChildrenInText.test.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { expect, test } from 'vitest'\n\nimport { wrapChildrenInText } from './wrapChildrenInText'\n\nconst Comp = () => {}\nconst re = <div data-id={Math.random()} />\nconst reID = re.props['data-id']\n\ntest('should wrap all string children, not wrap others', () => {\n  const out = wrapChildrenInText(Comp, {\n    children: [re, 'a', 'b', re, 'c', re, 'd'],\n  }) as any\n\n  expect(out[0].props['data-id']).toBe(reID)\n\n  expect(out[1].type).toBe(Comp)\n  expect(out[1].props.children).toStrictEqual(['a', 'b'])\n\n  expect(out[2].props['data-id']).toBe(reID)\n\n  expect(out[3].type).toBe(Comp)\n  expect(out[3].props.children).toStrictEqual(['c'])\n\n  expect(out[4].props['data-id']).toBe(reID)\n\n  expect(out[5].type).toBe(Comp)\n  expect(out[5].props.children).toStrictEqual(['d'])\n})\n\ntest('should first child string', () => {\n  const out = wrapChildrenInText(Comp, {\n    children: ['a', re],\n  }) as any\n\n  expect(out[0].type).toBe(Comp)\n  expect(out[0].props.children).toStrictEqual(['a'])\n\n  expect(out[1].props['data-id']).toBe(reID)\n})\n"],
+  "mappings": "AACA,SAAS,QAAQ,YAAY;AAE7B,SAAS,0BAA0B;AAEnC,MAAM,OAAO,MAAM;AAAC;AACpB,MAAM,KAAK,CAAC,IAAI,SAAS,KAAK,OAAO,GAAG;AACxC,MAAM,OAAO,GAAG,MAAM;AAEtB,KAAK,oDAAoD,MAAM;AAC7D,QAAM,MAAM,mBAAmB,MAAM;AAAA,IACnC,UAAU,CAAC,IAAI,KAAK,KAAK,IAAI,KAAK,IAAI,GAAG;AAAA,EAC3C,CAAC;AAED,SAAO,IAAI,GAAG,MAAM,UAAU,EAAE,KAAK,IAAI;AAEzC,SAAO,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI;AAC7B,SAAO,IAAI,GAAG,MAAM,QAAQ,EAAE,cAAc,CAAC,KAAK,GAAG,CAAC;AAEtD,SAAO,IAAI,GAAG,MAAM,UAAU,EAAE,KAAK,IAAI;AAEzC,SAAO,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI;AAC7B,SAAO,IAAI,GAAG,MAAM,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC;AAEjD,SAAO,IAAI,GAAG,MAAM,UAAU,EAAE,KAAK,IAAI;AAEzC,SAAO,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI;AAC7B,SAAO,IAAI,GAAG,MAAM,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC;AACnD,CAAC;AAED,KAAK,6BAA6B,MAAM;AACtC,QAAM,MAAM,mBAAmB,MAAM;AAAA,IACnC,UAAU,CAAC,KAAK,EAAE;AAAA,EACpB,CAAC;AAED,SAAO,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI;AAC7B,SAAO,IAAI,GAAG,MAAM,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC;AAEjD,SAAO,IAAI,GAAG,MAAM,UAAU,EAAE,KAAK,IAAI;AAC3C,CAAC;",
+  "names": []
+}

package/package.json

@@ -1,31 +1,42 @@
 {
   "name": "@tamagui/text",
-  "version": "1.0.1-beta.21",
-  "sideEffects": false,
+  "version": "1.0.1-beta.210",
+  "sideEffects": [
+    "*.css"
+  ],
   "source": "src/index.ts",
-  "typings": "types",
+  "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"
+    "watch": "tamagui-build --watch",
+    "lint": "eslint",
+    "lint:fix": "yarn lint --fix",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build",
+    "test": "vitest --config ../vite-plugin-internal/src/vite.config.ts --run"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.21"
+    "@tamagui/core": "^1.0.1-beta.210",
+    "@tamagui/get-font-sized": "^1.0.1-beta.210",
+    "@tamagui/helpers-tamagui": "^1.0.1-beta.210"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.21",
+    "@tamagui/build": "^1.0.1-beta.210",
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "vitest": "^0.24.3"
   },
   "publishConfig": {
     "access": "public"

package/src/Headings.tsx

@@ -0,0 +1,48 @@
+import { styled } from '@tamagui/core'
+
+import { Paragraph } from './Paragraph'
+
+export const Heading = styled(Paragraph, {
+  tag: 'span',
+  name: 'Heading',
+  accessibilityRole: 'header',
+  fontFamily: '$heading',
+  size: '$8',
+  margin: 0,
+})
+
+export const H1 = styled(Heading, {
+  name: 'H1',
+  tag: 'h1',
+  size: '$10',
+})
+
+export const H2 = styled(Heading, {
+  name: 'H2',
+  tag: 'h2',
+  size: '$9',
+})
+
+export const H3 = styled(Heading, {
+  name: 'H3',
+  tag: 'h3',
+  size: '$8',
+})
+
+export const H4 = styled(Heading, {
+  name: 'H4',
+  tag: 'h4',
+  size: '$7',
+})
+
+export const H5 = styled(Heading, {
+  name: 'H5',
+  tag: 'h5',
+  size: '$6',
+})
+
+export const H6 = styled(Heading, {
+  name: 'H6',
+  tag: 'h6',
+  size: '$5',
+})

package/src/Paragraph.tsx

@@ -0,0 +1,12 @@
+import { PropTypes, styled } from '@tamagui/core'
+
+import { SizableText } from './SizableText'
+
+export const Paragraph = styled(SizableText, {
+  name: 'Paragraph',
+  tag: 'p',
+  selectable: true,
+  cursor: 'text',
+})
+
+export type ParagraphProps = PropTypes<typeof Paragraph>

package/src/SizableText.tsx

@@ -0,0 +1,17 @@
+import { GetProps, Text, styled } from '@tamagui/core'
+import { getFontSized } from '@tamagui/get-font-sized'
+
+export const SizableText = styled(Text, {
+  name: 'SizableText',
+  fontFamily: '$body',
+
+  variants: {
+    size: getFontSized,
+  } as const,
+
+  defaultVariants: {
+    size: '$4',
+  },
+})
+
+export type SizableTextProps = GetProps<typeof SizableText>

package/src/index.tsx

@@ -0,0 +1,5 @@
+export * from './SizableText'
+export * from './Paragraph'
+export * from './Headings'
+export * from './wrapChildrenInText'
+export * from './types'

package/src/types.ts

@@ -0,0 +1,13 @@
+import { SizableTextProps } from './SizableText'
+
+export type TextParentStyles = {
+  color?: SizableTextProps['color']
+  fontWeight?: SizableTextProps['fontWeight']
+  fontSize?: SizableTextProps['fontSize']
+  fontFamily?: SizableTextProps['fontFamily']
+  letterSpacing?: SizableTextProps['letterSpacing']
+  textAlign?: SizableTextProps['textAlign']
+  // all the other text controls
+  textProps?: Partial<SizableTextProps>
+  noTextWrap?: boolean
+}

package/src/wrapChildrenInText.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { expect, test } from 'vitest'
+
+import { wrapChildrenInText } from './wrapChildrenInText'
+
+const Comp = () => {}
+const re = <div data-id={Math.random()} />
+const reID = re.props['data-id']
+
+test('should wrap all string children, not wrap others', () => {
+  const out = wrapChildrenInText(Comp, {
+    children: [re, 'a', 'b', re, 'c', re, 'd'],
+  }) as any
+
+  expect(out[0].props['data-id']).toBe(reID)
+
+  expect(out[1].type).toBe(Comp)
+  expect(out[1].props.children).toStrictEqual(['a', 'b'])
+
+  expect(out[2].props['data-id']).toBe(reID)
+
+  expect(out[3].type).toBe(Comp)
+  expect(out[3].props.children).toStrictEqual(['c'])
+
+  expect(out[4].props['data-id']).toBe(reID)
+
+  expect(out[5].type).toBe(Comp)
+  expect(out[5].props.children).toStrictEqual(['d'])
+})
+
+test('should first child string', () => {
+  const out = wrapChildrenInText(Comp, {
+    children: ['a', re],
+  }) as any
+
+  expect(out[0].type).toBe(Comp)
+  expect(out[0].props.children).toStrictEqual(['a'])
+
+  expect(out[1].props['data-id']).toBe(reID)
+})

package/src/wrapChildrenInText.tsx

@@ -0,0 +1,76 @@
+import type { SizeTokens } from '@tamagui/core'
+import React from 'react'
+
+import { TextParentStyles } from './types'
+
+type Props = TextParentStyles & {
+  children?: React.ReactNode
+  size?: SizeTokens
+}
+
+export function wrapChildrenInText(TextComponent: any, propsIn: Props) {
+  const {
+    children,
+    textProps,
+    size,
+    noTextWrap,
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    textAlign,
+  } = propsIn
+
+  if (noTextWrap || !children) {
+    return children
+  }
+
+  // in the case of using variables, like so:
+  // <ListItem>Hello, {name}</ListItem>
+  // it gives us props.children as ['Hello, ', 'name']
+  // but we don't want to wrap multiple SizableText around each part
+  // so we group them
+  const allChildren = React.Children.toArray(children)
+  const nextChildren: any[] = []
+  let lastIsString = false
+  const props: any = {}
+  // to avoid setting undefined
+  if (color) props.color = color
+  if (fontFamily) props.fontFamily = fontFamily
+  if (fontSize) props.fontSize = fontSize
+  if (fontWeight) props.fontWeight = fontWeight
+  if (letterSpacing) props.letterSpacing = letterSpacing
+  if (textAlign) props.textAlign = textAlign
+  if (size) props.size = size
+
+  function concatStringChildren() {
+    if (!lastIsString) return
+    const index = nextChildren.length - 1
+    const childrenStrings = nextChildren[index]
+    nextChildren[index] = (
+      <TextComponent key={index} {...props} {...textProps}>
+        {childrenStrings}
+      </TextComponent>
+    )
+  }
+
+  for (const child of allChildren) {
+    const last = nextChildren[nextChildren.length - 1]
+    const isString = typeof child === 'string'
+    if (isString) {
+      if (lastIsString) {
+        last.push(child)
+      } else {
+        nextChildren.push([child])
+      }
+    } else {
+      concatStringChildren()
+      nextChildren.push(child)
+    }
+    lastIsString = isString
+  }
+  concatStringChildren()
+
+  return nextChildren
+}