@tamagui/text 1.0.1-beta.99 → 1.0.1-rc.0

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'\nexport * from './wrapChildrenInText'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;",
+  "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

@@ -1,41 +1,44 @@
 import React from "react";
-function wrapChildrenInText(TextComponent, {
-  children,
-  textProps,
-  size,
-  noTextWrap,
-  color,
-  fontFamily,
-  fontSize,
-  fontWeight,
-  letterSpacing,
-  textAlign
-}) {
+function wrapChildrenInText(TextComponent, propsIn) {
+  const {
+    children,
+    textProps,
+    size,
+    noTextWrap,
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    textAlign
+  } = propsIn;
   if (noTextWrap || !children) {
     return children;
   }
-  let allChildren = React.Children.toArray(children);
-  let nextChildren = [];
+  const allChildren = React.Children.toArray(children);
+  const nextChildren = [];
   let lastIsString = false;
-  const directTextProps = {};
+  const props = {};
   if (color)
-    directTextProps.color = color;
+    props.color = color;
   if (fontFamily)
-    directTextProps.fontFamily = fontFamily;
+    props.fontFamily = fontFamily;
   if (fontSize)
-    directTextProps.fontSize = fontSize;
+    props.fontSize = fontSize;
   if (fontWeight)
-    directTextProps.fontWeight = fontWeight;
+    props.fontWeight = fontWeight;
   if (letterSpacing)
-    directTextProps.letterSpacing = letterSpacing;
+    props.letterSpacing = letterSpacing;
   if (textAlign)
-    directTextProps.textAlign = 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} {...directTextProps} size={size} {...textProps}>{childrenStrings}</TextComponent>;
+    nextChildren[index] = <TextComponent key={index} {...props} {...textProps}>{childrenStrings}</TextComponent>;
   }
   for (const child of allChildren) {
     const last = nextChildren[nextChildren.length - 1];

package/dist/jsx/wrapChildrenInText.js.map

@@ -1,7 +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;",
+  "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.map

@@ -2,6 +2,6 @@
   "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;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;",
+  "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,6 +1,6 @@
 {
   "name": "@tamagui/text",
-  "version": "1.0.1-beta.99",
+  "version": "1.0.1-rc.0",
   "sideEffects": [
     "*.css"
   ],
@@ -17,23 +17,26 @@
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
+    "lint": "eslint src",
+    "lint:fix": "yarn lint --fix",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build",
-    "test": "vitest --config ../vite-plugin-internal/vite.config.ts"
+    "test": "vitest --config ../vite-plugin-internal/src/vite.config.ts --run"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.99"
+    "@tamagui/core": "^1.0.1-rc.0",
+    "@tamagui/get-font-sized": "^1.0.1-rc.0",
+    "@tamagui/helpers-tamagui": "^1.0.1-rc.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.99",
-    "@tamagui/vite-plugin-internal": "^1.0.1-beta.99",
-    "react": "*",
-    "react-dom": "*",
-    "vitest": "^0.17.1"
+    "@tamagui/build": "^1.0.1-rc.0",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "vitest": "^0.25.3"
   },
   "publishConfig": {
     "access": "public"

package/src/SizableText.tsx

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

package/src/index.tsx

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

@@ -1,28 +1,15 @@
 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
-}
+import { TextParentStyles } from './types'
 
 type Props = TextParentStyles & {
   children?: React.ReactNode
   size?: SizeTokens
 }
 
-export function wrapChildrenInText(
-  TextComponent: any,
-  {
+export function wrapChildrenInText(TextComponent: any, propsIn: Props) {
+  const {
     children,
     textProps,
     size,
@@ -33,8 +20,8 @@ export function wrapChildrenInText(
     fontWeight,
     letterSpacing,
     textAlign,
-  }: Props
-) {
+  } = propsIn
+
   if (noTextWrap || !children) {
     return children
   }
@@ -44,24 +31,25 @@ export function wrapChildrenInText(
   // 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[] = []
+  const allChildren = React.Children.toArray(children)
+  const nextChildren: any[] = []
   let lastIsString = false
-  const directTextProps: any = {}
+  const props: 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
+  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} {...directTextProps} size={size} {...textProps}>
+      <TextComponent key={index} {...props} {...textProps}>
         {childrenStrings}
       </TextComponent>
     )