@tamagui/text 1.0.1-beta.92 → 1.0.1-beta.95

package/dist/cjs/SizableText.js

@@ -25,7 +25,7 @@ const SizableText = (0, import_core.styled)(import_core.Text, {
   name: "SizableText",
   fontFamily: "$body",
   variants: {
-    size: import_core.getTextSize
+    size: import_core.getFont
   },
   defaultVariants: {
     size: "$4"

package/dist/cjs/SizableText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SizableText.tsx"],
-  "sourcesContent": ["import { GetProps, Text, getTextSize, styled } from '@tamagui/core'\n\nexport const SizableText = styled(\n  Text,\n  {\n    name: 'SizableText',\n    fontFamily: '$body',\n\n    variants: {\n      size: getTextSize,\n    },\n\n    defaultVariants: {\n      size: '$4',\n    },\n  },\n  {\n    inlineWhenUnflattened: new Set(['fontFamily']),\n  }\n)\n\nexport type SizableTextProps = GetProps<typeof SizableText>\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAoD;AAE7C,MAAM,cAAc,wBACzB,kBACA;AAAA,EACE,MAAM;AAAA,EACN,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,GACA;AAAA,EACE,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAC/C,CACF;",
+  "sourcesContent": ["import { GetProps, Text, getFont, styled } from '@tamagui/core'\n\nexport const SizableText = styled(\n  Text,\n  {\n    name: 'SizableText',\n    fontFamily: '$body',\n\n    variants: {\n      size: getFont,\n    },\n\n    defaultVariants: {\n      size: '$4',\n    },\n  },\n  {\n    inlineWhenUnflattened: new Set(['fontFamily']),\n  }\n)\n\nexport type SizableTextProps = GetProps<typeof SizableText>\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgD;AAEzC,MAAM,cAAc,wBACzB,kBACA;AAAA,EACE,MAAM;AAAA,EACN,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,GACA;AAAA,EACE,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAC/C,CACF;",
   "names": []
 }

package/dist/cjs/index.js

@@ -17,4 +17,5 @@ module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./SizableText"), module.exports);
 __reExport(src_exports, require("./Paragraph"), module.exports);
 __reExport(src_exports, require("./Headings"), module.exports);
+__reExport(src_exports, require("./wrapChildrenInText"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export * from './SizableText'\nexport * from './Paragraph'\nexport * from './Headings'\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,0BAAd;AACA,wBAAc,wBADd;AAEA,wBAAc,uBAFd;",
+  "sourcesContent": ["export * from './SizableText'\nexport * from './Paragraph'\nexport * from './Headings'\nexport * from './wrapChildrenInText'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,0BAAd;AACA,wBAAc,wBADd;AAEA,wBAAc,uBAFd;AAGA,wBAAc,iCAHd;",
   "names": []
 }

package/dist/cjs/wrapChildrenInText.js

@@ -0,0 +1,108 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var wrapChildrenInText_exports = {};
+__export(wrapChildrenInText_exports, {
+  wrapChildrenInText: () => wrapChildrenInText
+});
+module.exports = __toCommonJS(wrapChildrenInText_exports);
+var import_react = __toESM(require("react"));
+function wrapChildrenInText(TextComponent, {
+  children,
+  textProps,
+  size,
+  noTextWrap,
+  color,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  letterSpacing,
+  textAlign
+}) {
+  if (noTextWrap || !children) {
+    return children;
+  }
+  let allChildren = import_react.default.Children.toArray(children);
+  let nextChildren = [];
+  let lastIsString = false;
+  const directTextProps = {};
+  if (color)
+    directTextProps.color = color;
+  if (fontFamily)
+    directTextProps.fontFamily = fontFamily;
+  if (fontSize)
+    directTextProps.fontSize = fontSize;
+  if (fontWeight)
+    directTextProps.fontWeight = fontWeight;
+  if (letterSpacing)
+    directTextProps.letterSpacing = letterSpacing;
+  if (textAlign)
+    directTextProps.textAlign = textAlign;
+  function concatStringChildren() {
+    if (!lastIsString)
+      return;
+    const index = nextChildren.length - 1;
+    const childrenStrings = nextChildren[index];
+    nextChildren[index] = /* @__PURE__ */ import_react.default.createElement(TextComponent, __spreadValues(__spreadProps(__spreadValues({
+      key: index
+    }, directTextProps), {
+      size
+    }), textProps), childrenStrings);
+  }
+  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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  wrapChildrenInText
+});
+//# sourceMappingURL=wrapChildrenInText.js.map

package/dist/cjs/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 { SizableTextProps } from './SizableText'\n\nexport type TextParentStyles = {\n  color?: SizableTextProps['color']\n  fontWeight?: SizableTextProps['fontWeight']\n  fontSize?: SizableTextProps['fontSize']\n  fontFamily?: SizableTextProps['fontFamily']\n  letterSpacing?: SizableTextProps['letterSpacing']\n  textAlign?: SizableTextProps['textAlign']\n  // all the other text controls\n  textProps?: Partial<SizableTextProps>\n  noTextWrap?: boolean\n}\n\ntype Props = TextParentStyles & {\n  children?: React.ReactNode\n  size?: SizeTokens\n}\n\nexport function wrapChildrenInText(\n  TextComponent: any,\n  {\n    children,\n    textProps,\n    size,\n    noTextWrap,\n    color,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    letterSpacing,\n    textAlign,\n  }: Props\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  let allChildren = React.Children.toArray(children)\n  let nextChildren: any[] = []\n  let lastIsString = false\n  const directTextProps: any = {}\n  // to avoid setting undefined\n  if (color) directTextProps.color = color\n  if (fontFamily) directTextProps.fontFamily = fontFamily\n  if (fontSize) directTextProps.fontSize = fontSize\n  if (fontWeight) directTextProps.fontWeight = fontWeight\n  if (letterSpacing) directTextProps.letterSpacing = letterSpacing\n  if (textAlign) directTextProps.textAlign = textAlign\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} {...directTextProps} size={size} {...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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAqBX,4BACL,eACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEF;AACA,MAAI,cAAc,CAAC,UAAU;AAC3B,WAAO;AAAA,EACT;AAOA,MAAI,cAAc,qBAAM,SAAS,QAAQ,QAAQ;AACjD,MAAI,eAAsB,CAAC;AAC3B,MAAI,eAAe;AACnB,QAAM,kBAAuB,CAAC;AAE9B,MAAI;AAAO,oBAAgB,QAAQ;AACnC,MAAI;AAAY,oBAAgB,aAAa;AAC7C,MAAI;AAAU,oBAAgB,WAAW;AACzC,MAAI;AAAY,oBAAgB,aAAa;AAC7C,MAAI;AAAe,oBAAgB,gBAAgB;AACnD,MAAI;AAAW,oBAAgB,YAAY;AAE3C,kCAAgC;AAC9B,QAAI,CAAC;AAAc;AACnB,UAAM,QAAQ,aAAa,SAAS;AACpC,UAAM,kBAAkB,aAAa;AACrC,iBAAa,SACX,mDAAC;AAAA,MAAc,KAAK;AAAA,OAAW,kBAA9B;AAAA,MAA+C;AAAA,QAAgB,YAC7D,eACH;AAAA,EAEJ;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/cjs/wrapChildrenInText.test.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/wrapChildrenInText.test.tsx"],
+  "sourcesContent": ["import { 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": "AAAA,oBAA6B;AAE7B,gCAAmC;AAEnC,MAAM,OAAO,MAAM;AAAC;AACpB,MAAM,KAAK,oCAAC;AAAA,EAAI,WAAS,KAAK,OAAO;AAAA,CAAG;AACxC,MAAM,OAAO,GAAG,MAAM;AAEtB,wBAAK,oDAAoD,MAAM;AAC7D,QAAM,MAAM,kDAAmB,MAAM;AAAA,IACnC,UAAU,CAAC,IAAI,KAAK,KAAK,IAAI,KAAK,IAAI,GAAG;AAAA,EAC3C,CAAC;AAED,4BAAO,IAAI,GAAG,MAAM,UAAU,EAAE,KAAK,IAAI;AAEzC,4BAAO,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI;AAC7B,4BAAO,IAAI,GAAG,MAAM,QAAQ,EAAE,cAAc,CAAC,KAAK,GAAG,CAAC;AAEtD,4BAAO,IAAI,GAAG,MAAM,UAAU,EAAE,KAAK,IAAI;AAEzC,4BAAO,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI;AAC7B,4BAAO,IAAI,GAAG,MAAM,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC;AAEjD,4BAAO,IAAI,GAAG,MAAM,UAAU,EAAE,KAAK,IAAI;AAEzC,4BAAO,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI;AAC7B,4BAAO,IAAI,GAAG,MAAM,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC;AACnD,CAAC;AAED,wBAAK,6BAA6B,MAAM;AACtC,QAAM,MAAM,kDAAmB,MAAM;AAAA,IACnC,UAAU,CAAC,KAAK,EAAE;AAAA,EACpB,CAAC;AAED,4BAAO,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI;AAC7B,4BAAO,IAAI,GAAG,MAAM,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC;AAEjD,4BAAO,IAAI,GAAG,MAAM,UAAU,EAAE,KAAK,IAAI;AAC3C,CAAC;",
+  "names": []
+}

package/dist/esm/SizableText.js

@@ -1,9 +1,9 @@
-import { Text, getTextSize, styled } from "@tamagui/core";
+import { Text, getFont, styled } from "@tamagui/core";
 const SizableText = styled(Text, {
   name: "SizableText",
   fontFamily: "$body",
   variants: {
-    size: getTextSize
+    size: getFont
   },
   defaultVariants: {
     size: "$4"

package/dist/esm/SizableText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SizableText.tsx"],
-  "sourcesContent": ["import { GetProps, Text, getTextSize, styled } from '@tamagui/core'\n\nexport const SizableText = styled(\n  Text,\n  {\n    name: 'SizableText',\n    fontFamily: '$body',\n\n    variants: {\n      size: getTextSize,\n    },\n\n    defaultVariants: {\n      size: '$4',\n    },\n  },\n  {\n    inlineWhenUnflattened: new Set(['fontFamily']),\n  }\n)\n\nexport type SizableTextProps = GetProps<typeof SizableText>\n"],
+  "sourcesContent": ["import { GetProps, Text, getFont, styled } from '@tamagui/core'\n\nexport const SizableText = styled(\n  Text,\n  {\n    name: 'SizableText',\n    fontFamily: '$body',\n\n    variants: {\n      size: getFont,\n    },\n\n    defaultVariants: {\n      size: '$4',\n    },\n  },\n  {\n    inlineWhenUnflattened: new Set(['fontFamily']),\n  }\n)\n\nexport type SizableTextProps = GetProps<typeof SizableText>\n"],
   "mappings": "AAAA;AAEO,MAAM,cAAc,OACzB,MACA;AAAA,EACE,MAAM;AAAA,EACN,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,GACA;AAAA,EACE,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAC/C,CACF;",
   "names": []
 }

package/dist/esm/index.js

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

package/dist/esm/index.js.map

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

package/dist/esm/wrapChildrenInText.js

@@ -0,0 +1,84 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React from "react";
+function wrapChildrenInText(TextComponent, {
+  children,
+  textProps,
+  size,
+  noTextWrap,
+  color,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  letterSpacing,
+  textAlign
+}) {
+  if (noTextWrap || !children) {
+    return children;
+  }
+  let allChildren = React.Children.toArray(children);
+  let nextChildren = [];
+  let lastIsString = false;
+  const directTextProps = {};
+  if (color)
+    directTextProps.color = color;
+  if (fontFamily)
+    directTextProps.fontFamily = fontFamily;
+  if (fontSize)
+    directTextProps.fontSize = fontSize;
+  if (fontWeight)
+    directTextProps.fontWeight = fontWeight;
+  if (letterSpacing)
+    directTextProps.letterSpacing = letterSpacing;
+  if (textAlign)
+    directTextProps.textAlign = textAlign;
+  function concatStringChildren() {
+    if (!lastIsString)
+      return;
+    const index = nextChildren.length - 1;
+    const childrenStrings = nextChildren[index];
+    nextChildren[index] = /* @__PURE__ */ React.createElement(TextComponent, __spreadValues(__spreadProps(__spreadValues({
+      key: index
+    }, directTextProps), {
+      size
+    }), textProps), childrenStrings);
+  }
+  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/esm/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 { SizableTextProps } from './SizableText'\n\nexport type TextParentStyles = {\n  color?: SizableTextProps['color']\n  fontWeight?: SizableTextProps['fontWeight']\n  fontSize?: SizableTextProps['fontSize']\n  fontFamily?: SizableTextProps['fontFamily']\n  letterSpacing?: SizableTextProps['letterSpacing']\n  textAlign?: SizableTextProps['textAlign']\n  // all the other text controls\n  textProps?: Partial<SizableTextProps>\n  noTextWrap?: boolean\n}\n\ntype Props = TextParentStyles & {\n  children?: React.ReactNode\n  size?: SizeTokens\n}\n\nexport function wrapChildrenInText(\n  TextComponent: any,\n  {\n    children,\n    textProps,\n    size,\n    noTextWrap,\n    color,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    letterSpacing,\n    textAlign,\n  }: Props\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  let allChildren = React.Children.toArray(children)\n  let nextChildren: any[] = []\n  let lastIsString = false\n  const directTextProps: any = {}\n  // to avoid setting undefined\n  if (color) directTextProps.color = color\n  if (fontFamily) directTextProps.fontFamily = fontFamily\n  if (fontSize) directTextProps.fontSize = fontSize\n  if (fontWeight) directTextProps.fontWeight = fontWeight\n  if (letterSpacing) directTextProps.letterSpacing = letterSpacing\n  if (textAlign) directTextProps.textAlign = textAlign\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} {...directTextProps} size={size} {...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;AAqBO,4BACL,eACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEF;AACA,MAAI,cAAc,CAAC,UAAU;AAC3B,WAAO;AAAA,EACT;AAOA,MAAI,cAAc,MAAM,SAAS,QAAQ,QAAQ;AACjD,MAAI,eAAsB,CAAC;AAC3B,MAAI,eAAe;AACnB,QAAM,kBAAuB,CAAC;AAE9B,MAAI;AAAO,oBAAgB,QAAQ;AACnC,MAAI;AAAY,oBAAgB,aAAa;AAC7C,MAAI;AAAU,oBAAgB,WAAW;AACzC,MAAI;AAAY,oBAAgB,aAAa;AAC7C,MAAI;AAAe,oBAAgB,gBAAgB;AACnD,MAAI;AAAW,oBAAgB,YAAY;AAE3C,kCAAgC;AAC9B,QAAI,CAAC;AAAc;AACnB,UAAM,QAAQ,aAAa,SAAS;AACpC,UAAM,kBAAkB,aAAa;AACrC,iBAAa,SACX,oCAAC;AAAA,MAAc,KAAK;AAAA,OAAW,kBAA9B;AAAA,MAA+C;AAAA,QAAgB,YAC7D,eACH;AAAA,EAEJ;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/esm/wrapChildrenInText.test.js

@@ -0,0 +1,31 @@
+import { expect, test } from "vitest";
+import { wrapChildrenInText } from "./wrapChildrenInText";
+const Comp = () => {
+};
+const re = /* @__PURE__ */ React.createElement("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/esm/wrapChildrenInText.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/wrapChildrenInText.test.tsx"],
+  "sourcesContent": ["import { 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": "AAAA;AAEA;AAEA,MAAM,OAAO,MAAM;AAAC;AACpB,MAAM,KAAK,oCAAC;AAAA,EAAI,WAAS,KAAK,OAAO;AAAA,CAAG;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/dist/jsx/SizableText.js

@@ -1,9 +1,9 @@
-import { Text, getTextSize, styled } from "@tamagui/core";
+import { Text, getFont, styled } from "@tamagui/core";
 const SizableText = styled(Text, {
   name: "SizableText",
   fontFamily: "$body",
   variants: {
-    size: getTextSize
+    size: getFont
   },
   defaultVariants: {
     size: "$4"

package/dist/jsx/SizableText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SizableText.tsx"],
-  "sourcesContent": ["import { GetProps, Text, getTextSize, styled } from '@tamagui/core'\n\nexport const SizableText = styled(\n  Text,\n  {\n    name: 'SizableText',\n    fontFamily: '$body',\n\n    variants: {\n      size: getTextSize,\n    },\n\n    defaultVariants: {\n      size: '$4',\n    },\n  },\n  {\n    inlineWhenUnflattened: new Set(['fontFamily']),\n  }\n)\n\nexport type SizableTextProps = GetProps<typeof SizableText>\n"],
+  "sourcesContent": ["import { GetProps, Text, getFont, styled } from '@tamagui/core'\n\nexport const SizableText = styled(\n  Text,\n  {\n    name: 'SizableText',\n    fontFamily: '$body',\n\n    variants: {\n      size: getFont,\n    },\n\n    defaultVariants: {\n      size: '$4',\n    },\n  },\n  {\n    inlineWhenUnflattened: new Set(['fontFamily']),\n  }\n)\n\nexport type SizableTextProps = GetProps<typeof SizableText>\n"],
   "mappings": "AAAA;AAEO,MAAM,cAAc,OACzB,MACA;AAAA,EACE,MAAM;AAAA,EACN,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,GACA;AAAA,EACE,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAC/C,CACF;",
   "names": []
 }

package/dist/jsx/index.js

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

package/dist/jsx/index.js.map

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

package/dist/jsx/wrapChildrenInText.js

@@ -0,0 +1,61 @@
+import React from "react";
+function wrapChildrenInText(TextComponent, {
+  children,
+  textProps,
+  size,
+  noTextWrap,
+  color,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  letterSpacing,
+  textAlign
+}) {
+  if (noTextWrap || !children) {
+    return children;
+  }
+  let allChildren = React.Children.toArray(children);
+  let nextChildren = [];
+  let lastIsString = false;
+  const directTextProps = {};
+  if (color)
+    directTextProps.color = color;
+  if (fontFamily)
+    directTextProps.fontFamily = fontFamily;
+  if (fontSize)
+    directTextProps.fontSize = fontSize;
+  if (fontWeight)
+    directTextProps.fontWeight = fontWeight;
+  if (letterSpacing)
+    directTextProps.letterSpacing = letterSpacing;
+  if (textAlign)
+    directTextProps.textAlign = textAlign;
+  function concatStringChildren() {
+    if (!lastIsString)
+      return;
+    const index = nextChildren.length - 1;
+    const childrenStrings = nextChildren[index];
+    nextChildren[index] = <TextComponent key={index} {...directTextProps} size={size} {...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 { SizableTextProps } from './SizableText'\n\nexport type TextParentStyles = {\n  color?: SizableTextProps['color']\n  fontWeight?: SizableTextProps['fontWeight']\n  fontSize?: SizableTextProps['fontSize']\n  fontFamily?: SizableTextProps['fontFamily']\n  letterSpacing?: SizableTextProps['letterSpacing']\n  textAlign?: SizableTextProps['textAlign']\n  // all the other text controls\n  textProps?: Partial<SizableTextProps>\n  noTextWrap?: boolean\n}\n\ntype Props = TextParentStyles & {\n  children?: React.ReactNode\n  size?: SizeTokens\n}\n\nexport function wrapChildrenInText(\n  TextComponent: any,\n  {\n    children,\n    textProps,\n    size,\n    noTextWrap,\n    color,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    letterSpacing,\n    textAlign,\n  }: Props\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  let allChildren = React.Children.toArray(children)\n  let nextChildren: any[] = []\n  let lastIsString = false\n  const directTextProps: any = {}\n  // to avoid setting undefined\n  if (color) directTextProps.color = color\n  if (fontFamily) directTextProps.fontFamily = fontFamily\n  if (fontSize) directTextProps.fontSize = fontSize\n  if (fontWeight) directTextProps.fontWeight = fontWeight\n  if (letterSpacing) directTextProps.letterSpacing = letterSpacing\n  if (textAlign) directTextProps.textAlign = textAlign\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} {...directTextProps} size={size} {...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;AAqBO,4BACL,eACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEF;AACA,MAAI,cAAc,CAAC,UAAU;AAC3B,WAAO;AAAA,EACT;AAOA,MAAI,cAAc,MAAM,SAAS,QAAQ,QAAQ;AACjD,MAAI,eAAsB,CAAC;AAC3B,MAAI,eAAe;AACnB,QAAM,kBAAuB,CAAC;AAE9B,MAAI;AAAO,oBAAgB,QAAQ;AACnC,MAAI;AAAY,oBAAgB,aAAa;AAC7C,MAAI;AAAU,oBAAgB,WAAW;AACzC,MAAI;AAAY,oBAAgB,aAAa;AAC7C,MAAI;AAAe,oBAAgB,gBAAgB;AACnD,MAAI;AAAW,oBAAgB,YAAY;AAE3C,kCAAgC;AAC9B,QAAI,CAAC;AAAc;AACnB,UAAM,QAAQ,aAAa,SAAS;AACpC,UAAM,kBAAkB,aAAa;AACrC,iBAAa,SACX,CAAC,cAAc,KAAK,WAAW,iBAAiB,MAAM,UAAU,YAC7D,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 { 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": "AAAA;AAEA;AAEA,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,6 +1,6 @@
 {
   "name": "@tamagui/text",
-  "version": "1.0.1-beta.92",
+  "version": "1.0.1-beta.95",
   "sideEffects": [
     "*.css"
   ],
@@ -16,19 +16,24 @@
   ],
   "scripts": {
     "build": "tamagui-build",
-    "watch": "tamagui-build --watch"
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build",
+    "test": "vitest --config ../vite-plugin-internal/vite.config.ts"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.92"
+    "@tamagui/core": "^1.0.1-beta.95"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.92",
+    "@tamagui/build": "^1.0.1-beta.95",
+    "@tamagui/vite-plugin-internal": "^1.0.1-beta.95",
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "vitest": "^0.16.0"
   },
   "publishConfig": {
     "access": "public"

package/src/SizableText.tsx

@@ -1,4 +1,4 @@
-import { GetProps, Text, getTextSize, styled } from '@tamagui/core'
+import { GetProps, Text, getFont, styled } from '@tamagui/core'
 
 export const SizableText = styled(
   Text,
@@ -7,7 +7,7 @@ export const SizableText = styled(
     fontFamily: '$body',
 
     variants: {
-      size: getTextSize,
+      size: getFont,
     },
 
     defaultVariants: {

package/src/index.tsx

@@ -1,3 +1,4 @@
 export * from './SizableText'
 export * from './Paragraph'
 export * from './Headings'
+export * from './wrapChildrenInText'

package/src/wrapChildrenInText.test.tsx

@@ -0,0 +1,39 @@
+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,88 @@
+import type { SizeTokens } from '@tamagui/core'
+import React from 'react'
+
+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
+}
+
+type Props = TextParentStyles & {
+  children?: React.ReactNode
+  size?: SizeTokens
+}
+
+export function wrapChildrenInText(
+  TextComponent: any,
+  {
+    children,
+    textProps,
+    size,
+    noTextWrap,
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    textAlign,
+  }: Props
+) {
+  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
+  let allChildren = React.Children.toArray(children)
+  let nextChildren: any[] = []
+  let lastIsString = false
+  const directTextProps: any = {}
+  // to avoid setting undefined
+  if (color) directTextProps.color = color
+  if (fontFamily) directTextProps.fontFamily = fontFamily
+  if (fontSize) directTextProps.fontSize = fontSize
+  if (fontWeight) directTextProps.fontWeight = fontWeight
+  if (letterSpacing) directTextProps.letterSpacing = letterSpacing
+  if (textAlign) directTextProps.textAlign = textAlign
+
+  function concatStringChildren() {
+    if (!lastIsString) return
+    const index = nextChildren.length - 1
+    const childrenStrings = nextChildren[index]
+    nextChildren[index] = (
+      <TextComponent key={index} {...directTextProps} size={size} {...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
+}

package/types/SizableText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SizableText.d.ts","sourceRoot":"","sources":["../src/SizableText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA6B,MAAM,eAAe,CAAA;AAEnE,eAAO,MAAM,WAAW;;;;;;;;EAiBvB,CAAA;AAED,oBAAY,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA"}
+{"version":3,"file":"SizableText.d.ts","sourceRoot":"","sources":["../src/SizableText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,eAAe,CAAA;AAE/D,eAAO,MAAM,WAAW;;;;;;;;EAiBvB,CAAA;AAED,oBAAY,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './SizableText';
 export * from './Paragraph';
 export * from './Headings';
+export * from './wrapChildrenInText';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA"}

package/types/wrapChildrenInText.d.ts

@@ -0,0 +1,20 @@
+import type { SizeTokens } from '@tamagui/core';
+import React from 'react';
+import { SizableTextProps } from './SizableText';
+export declare type TextParentStyles = {
+    color?: SizableTextProps['color'];
+    fontWeight?: SizableTextProps['fontWeight'];
+    fontSize?: SizableTextProps['fontSize'];
+    fontFamily?: SizableTextProps['fontFamily'];
+    letterSpacing?: SizableTextProps['letterSpacing'];
+    textAlign?: SizableTextProps['textAlign'];
+    textProps?: Partial<SizableTextProps>;
+    noTextWrap?: boolean;
+};
+declare type Props = TextParentStyles & {
+    children?: React.ReactNode;
+    size?: SizeTokens;
+};
+export declare function wrapChildrenInText(TextComponent: any, { children, textProps, size, noTextWrap, color, fontFamily, fontSize, fontWeight, letterSpacing, textAlign, }: Props): string | number | boolean | any[] | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | null | undefined;
+export {};
+//# sourceMappingURL=wrapChildrenInText.d.ts.map

package/types/wrapChildrenInText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapChildrenInText.d.ts","sourceRoot":"","sources":["../src/wrapChildrenInText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAEhD,oBAAY,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAC3C,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IAEzC,SAAS,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,aAAK,KAAK,GAAG,gBAAgB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,GAAG,EAClB,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,UAAU,EACV,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,aAAa,EACb,SAAS,GACV,EAAE,KAAK,mJAoDT"}

package/types/wrapChildrenInText.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=wrapChildrenInText.test.d.ts.map

package/types/wrapChildrenInText.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapChildrenInText.test.d.ts","sourceRoot":"","sources":["../src/wrapChildrenInText.test.tsx"],"names":[],"mappings":""}

package/types/Texts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Texts.d.ts","sourceRoot":"","sources":["../src/Texts.tsx"],"names":[],"mappings":""}