@tamagui/core 1.0.1-beta.190 → 1.0.1-beta.191

package/dist/esm/helpers/insertStyleRule.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/insertStyleRule.tsx"],
-  "sourcesContent": ["// this needs to check if its inserted already? 99% of the time it is\n// this should avoid re-inserts, but need to test the perf trade-offs\n// i tested with the site itself and the initial insert was trivial\n\nimport { StyleObject } from '@tamagui/helpers'\n\nconst allSelectors = {}\nconst allRules = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getAllRules = () => Object.values(allRules)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, css: string, rule?: CSSRule) {\n  const s = css.indexOf('transform:')\n  if (s === -1) {\n    if (process.env.NODE_ENV === 'development') {\n      // sometimes getting empty style rules from webpack... :/ only in dev\n      if (css.indexOf('{ }')) {\n        console.log('wah wah')\n        return false\n      }\n      console.groupCollapsed(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`)\n      console.log('rule:', rule)\n      console.trace()\n      console.groupEnd()\n    } else {\n      console.warn(`Missing transform`, identifier, css, rule)\n    }\n    return false\n  }\n  const startI = s + 'transform:'.length\n  const endI = css.indexOf(';')\n  const value = css.slice(startI, endI)\n  if (!insertedTransforms[identifier]) {\n    insertedTransforms[identifier] = value\n    return true\n  }\n  return false\n}\n\nconst isClient = typeof document !== 'undefined'\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\nconst scannedNum = new WeakMap<CSSStyleSheet, number>()\n\nexport function updateInserted() {\n  if (process.env.NODE_ENV === 'test') return\n  if (!isClient) return\n  const sheets = document.styleSheets\n  if (!sheets) return\n  for (let i = 0; i < sheets.length; i++) {\n    const sheet = sheets[i]\n    if (!sheet) continue\n\n    // avoid errors on cross origin sheets\n    // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property\n    let rules: CSSRuleList\n    try {\n      rules = sheet.cssRules\n    } catch {\n      continue\n    }\n\n    const len = rules.length\n    const lastScanned = scannedNum.get(sheet) ?? 0\n    if (lastScanned === len) {\n      continue\n    }\n    for (let i = lastScanned; i < len; i++) {\n      const rule = rules[i]\n      const response = getTamaguiSelector(rule)\n      if (!response) {\n        continue\n      }\n      const [identifier, cssRule] = response\n      if (!allSelectors[identifier]) {\n        const isTransform = identifier.startsWith('_transform')\n        const shouldInsert = isTransform ? addTransform(identifier, cssRule.cssText, cssRule) : true\n        if (shouldInsert) {\n          allSelectors[identifier] = process.env.NODE_ENV === 'development' ? cssRule.cssText : true\n        }\n      }\n    }\n    scannedNum.set(sheet, i)\n  }\n}\n\nfunction getTamaguiSelector(rule: CSSRule | null): readonly [string, CSSStyleRule] | null {\n  if (rule instanceof CSSStyleRule) {\n    if (rule.selectorText.startsWith('._')) {\n      return [rule.selectorText.slice(1), rule]\n    }\n    if (rule.selectorText.startsWith(':root') && rule.selectorText.includes('._')) {\n      return [getIdentifierFromTamaguiSelector(rule.selectorText), rule]\n    }\n  } else if (rule instanceof CSSMediaRule) {\n    // tamagui only ever inserts 1 rule per media\n    if (rule.cssRules.length > 1) return null\n    return getTamaguiSelector(rule.cssRules[0])\n  }\n  return null\n}\n\nconst getIdentifierFromTamaguiSelector = (selector: string) =>\n  selector\n    .replace(/(:root)+\\s+/, '')\n    .replace(/:[a-z]+$/, '')\n    .slice(1)\n\n// move this to probably inside createTamagui\nupdateInserted()\n\nconst sheet = isClient ? document.head.appendChild(document.createElement('style')).sheet : null\n\nexport function updateRules(identifier: string, rules: string[]) {\n  if (allRules[identifier]) return false\n  allRules[identifier] = rules\n  if (identifier.startsWith('_transform')) {\n    return addTransform(identifier, rules[0])\n  }\n  return true\n}\n\n// [property, identifier, rules]\nexport type PartialStyleObject = Pick<StyleObject, 'identifier' | 'property' | 'rules'>\nexport type RulesToInsert = PartialStyleObject[]\n\nexport function insertStyleRules(rulesToInsert: RulesToInsert) {\n  // // pointerevents can have more than one, others could to needs some refactor\n  for (const { identifier, rules } of rulesToInsert) {\n    if (allSelectors[identifier] || !sheet) return\n    allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rules : true\n    updateRules(identifier, rules)\n    for (const rule of rules) {\n      sheet.insertRule(rule, sheet.cssRules.length)\n    }\n  }\n}\n\nexport function shouldInsertStyleRules(styleObject: PartialStyleObject) {\n  return !allSelectors[styleObject.identifier]\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// this needs to check if its inserted already? 99% of the time it is\n// this should avoid re-inserts, but need to test the perf trade-offs\n// i tested with the site itself and the initial insert was trivial\n\nimport type { StyleObject } from '@tamagui/helpers'\n\nconst allSelectors = {}\nconst allRules = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getAllRules = () => Object.values(allRules)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, css: string, rule?: CSSRule) {\n  const s = css.indexOf('transform:')\n  if (s === -1) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`)\n      // eslint-disable-next-line no-console\n      console.log('rule:', rule)\n      // eslint-disable-next-line no-console\n      console.trace()\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    } else {\n      // missing transform\n    }\n    return false\n  }\n  const startI = s + 'transform:'.length\n  const endI = css.indexOf(';')\n  const value = css.slice(startI, endI)\n  if (!insertedTransforms[identifier]) {\n    insertedTransforms[identifier] = value\n    return true\n  }\n  return false\n}\n\nconst isClient = typeof document !== 'undefined'\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\nconst scannedNum = new WeakMap<CSSStyleSheet, number>()\n\nexport function updateInserted() {\n  if (process.env.NODE_ENV === 'test') return\n  if (!isClient) return\n  const sheets = document.styleSheets\n  if (!sheets) return\n  for (let i = 0; i < sheets.length; i++) {\n    const sheet = sheets[i]\n    if (!sheet) continue\n\n    // avoid errors on cross origin sheets\n    // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property\n    let rules: CSSRuleList\n    try {\n      rules = sheet.cssRules\n    } catch {\n      continue\n    }\n\n    const len = rules.length\n    const lastScanned = scannedNum.get(sheet) ?? 0\n    if (lastScanned === len) {\n      continue\n    }\n    for (let i = lastScanned; i < len; i++) {\n      const rule = rules[i]\n      const response = getTamaguiSelector(rule)\n      if (!response) {\n        continue\n      }\n      const [identifier, cssRule] = response\n      if (!allSelectors[identifier]) {\n        const isTransform = identifier.startsWith('_transform')\n        const shouldInsert = isTransform ? addTransform(identifier, cssRule.cssText, cssRule) : true\n        if (shouldInsert) {\n          allSelectors[identifier] = process.env.NODE_ENV === 'development' ? cssRule.cssText : true\n        }\n      }\n    }\n    scannedNum.set(sheet, i)\n  }\n}\n\nfunction getTamaguiSelector(rule: CSSRule | null): readonly [string, CSSStyleRule] | null {\n  if (rule instanceof CSSStyleRule) {\n    const text = rule.selectorText\n    if (text.startsWith('._')) {\n      return [text.slice(1), rule]\n    }\n    if (text.startsWith(':root') && text.includes('._')) {\n      return [getIdentifierFromTamaguiSelector(text), rule]\n    }\n  } else if (rule instanceof CSSMediaRule) {\n    // tamagui only ever inserts 1 rule per media\n    if (rule.cssRules.length > 1) return null\n    return getTamaguiSelector(rule.cssRules[0])\n  }\n  return null\n}\n\nconst getIdentifierFromTamaguiSelector = (selector: string) =>\n  selector\n    .replace(/(:root)+\\s+/, '')\n    .replace(/:[a-z]+$/, '')\n    .slice(1)\n\n// move this to probably inside createTamagui\nupdateInserted()\n\nconst sheet = isClient ? document.head.appendChild(document.createElement('style')).sheet : null\n\nexport function updateRules(identifier: string, rules: string[]) {\n  if (allRules[identifier]) return false\n  allRules[identifier] = rules\n  if (identifier.startsWith('_transform')) {\n    return addTransform(identifier, rules[0])\n  }\n  return true\n}\n\n// [property, identifier, rules]\nexport type PartialStyleObject = Pick<StyleObject, 'identifier' | 'property' | 'rules'>\nexport type RulesToInsert = PartialStyleObject[]\n\nexport function insertStyleRules(rulesToInsert: RulesToInsert) {\n  // // pointerevents can have more than one, others could to needs some refactor\n  for (const { identifier, rules } of rulesToInsert) {\n    if (allSelectors[identifier] || !sheet) return\n    allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rules : true\n    updateRules(identifier, rules)\n    for (const rule of rules) {\n      sheet.insertRule(rule, sheet.cssRules.length)\n    }\n  }\n}\n\nexport function shouldInsertStyleRules(styleObject: PartialStyleObject) {\n  return !allSelectors[styleObject.identifier]\n}\n"],
+  "mappings": "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",
   "names": ["sheet", "i"]
 }

package/dist/esm/views/Slot.js

@@ -1,18 +1,18 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { composeRefs } from "@tamagui/compose-refs";
 import { isWeb } from "@tamagui/constants";
-import * as React from "react";
-const Slot = React.forwardRef((props, forwardedRef) => {
+import { Children, cloneElement, forwardRef, isValidElement } from "react";
+const Slot = forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React.Children.toArray(children);
+  const childrenArray = Children.toArray(children);
   const slottable = childrenArray.find(isSlottable);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React.Children.count(newElement) > 1)
-          return React.Children.only(null);
-        return React.isValidElement(newElement) ? newElement.props.children : null;
+        if (Children.count(newElement) > 1)
+          return Children.only(null);
+        return isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
@@ -20,7 +20,7 @@ const Slot = React.forwardRef((props, forwardedRef) => {
     return /* @__PURE__ */ jsx(SlotClone, {
       ...slotProps,
       ref: forwardedRef,
-      children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null
+      children: isValidElement(newElement) ? cloneElement(newElement, void 0, newChildren) : null
     });
   }
   return /* @__PURE__ */ jsx(SlotClone, {
@@ -30,16 +30,16 @@ const Slot = React.forwardRef((props, forwardedRef) => {
   });
 });
 Slot.displayName = "Slot";
-const SlotClone = React.forwardRef((props, forwardedRef) => {
+const SlotClone = forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React.isValidElement(children)) {
+  if (isValidElement(children)) {
     const childProps = {
       ...mergeSlotProps(children, slotProps),
       ref: composeRefs(forwardedRef, children.ref)
     };
-    return React.cloneElement(children, childProps);
+    return cloneElement(children, childProps);
   }
-  return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+  return Children.count(children) > 1 ? Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 const Slottable = ({ children }) => {
@@ -48,7 +48,7 @@ const Slottable = ({ children }) => {
   });
 };
 function isSlottable(child) {
-  return React.isValidElement(child) && child.type === Slottable;
+  return isValidElement(child) && child.type === Slottable;
 }
 const pressMap = isWeb ? {
   onPress: "onClick",

package/dist/esm/views/Slot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Slot.tsx"],
-  "sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport { isWeb } from '@tamagui/constants'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n  children?: React.ReactNode\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n  const childrenArray = React.Children.toArray(children)\n  const slottable = childrenArray.find(isSlottable)\n\n  if (slottable) {\n    // the new element to render is the one passed as a child of `Slottable`\n    const newElement = slottable.props.children as React.ReactNode\n\n    const newChildren = childrenArray.map((child) => {\n      if (child === slottable) {\n        // because the new element will be the one rendered, we are only interested\n        // in grabbing its children (`newElement.props.children`)\n        if (React.Children.count(newElement) > 1) return React.Children.only(null)\n        return React.isValidElement(newElement)\n          ? (newElement.props.children as React.ReactNode)\n          : null\n      } else {\n        return child\n      }\n    })\n\n    return (\n      <SlotClone {...slotProps} ref={forwardedRef}>\n        {React.isValidElement(newElement)\n          ? React.cloneElement(newElement, undefined, newChildren)\n          : null}\n      </SlotClone>\n    )\n  }\n\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: React.ReactNode\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (React.isValidElement(children)) {\n    const childProps = {\n      ...mergeSlotProps(children, slotProps),\n      ref: composeRefs(forwardedRef, (children as any).ref),\n    }\n    return React.cloneElement(children, childProps)\n  }\n\n  return React.Children.count(children) > 1 ? React.Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n  return React.isValidElement(child) && child.type === Slottable\n}\n\nconst pressMap = isWeb\n  ? {\n      onPress: 'onClick',\n      onPressOut: 'onMouseUp',\n      onPressIn: 'onMouseDown',\n    }\n  : {}\n\nfunction mergeSlotProps(child: any, slotProps: AnyProps) {\n  const childProps = child.props\n\n  // all child props should override\n  const overrideProps = { ...childProps }\n  const isHTMLChild = typeof child.type === 'string'\n\n  if (isHTMLChild) {\n    for (const key in pressMap) {\n      if (key in slotProps) {\n        slotProps[pressMap[key]] = slotProps[key]\n        delete slotProps[key]\n      }\n    }\n  }\n\n  for (let propName in childProps) {\n    const slotPropValue = slotProps[propName]\n    const childPropValue = childProps[propName]\n\n    if (isHTMLChild && pressMap[propName]) {\n      propName = pressMap[propName]\n      delete overrideProps[propName]\n    }\n\n    const isHandler = handleRegex.test(propName)\n    // if it's a handler, modify the override by composing the base handler\n    if (isHandler) {\n      overrideProps[propName] = mergeEvent(childPropValue, slotPropValue)\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n    }\n  }\n\n  return { ...slotProps, ...overrideProps }\n}\n\nconst handleRegex = /^on[A-Z]/\n\nexport function mergeEvent(a?: Function, b?: Function) {\n  return (...args: unknown[]) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport { isWeb } from '@tamagui/constants'\nimport { Children, ReactElement, ReactNode, cloneElement, forwardRef, isValidElement } from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n  children?: ReactNode\n}\n\nexport const Slot = forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n  const childrenArray = Children.toArray(children)\n  const slottable = childrenArray.find(isSlottable)\n\n  if (slottable) {\n    // the new element to render is the one passed as a child of `Slottable`\n    const newElement = slottable.props.children as ReactNode\n\n    const newChildren = childrenArray.map((child) => {\n      if (child === slottable) {\n        // because the new element will be the one rendered, we are only interested\n        // in grabbing its children (`newElement.props.children`)\n        if (Children.count(newElement) > 1) return Children.only(null)\n        return isValidElement(newElement) ? (newElement.props.children as ReactNode) : null\n      } else {\n        return child\n      }\n    })\n\n    return (\n      <SlotClone {...slotProps} ref={forwardedRef}>\n        {isValidElement(newElement) ? cloneElement(newElement, undefined, newChildren) : null}\n      </SlotClone>\n    )\n  }\n\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: ReactNode\n}\n\nconst SlotClone = forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (isValidElement(children)) {\n    const childProps = {\n      ...mergeSlotProps(children, slotProps),\n      ref: composeRefs(forwardedRef, (children as any).ref),\n    }\n    return cloneElement(children, childProps)\n  }\n\n  return Children.count(children) > 1 ? Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: ReactNode }) => {\n  return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\nfunction isSlottable(child: ReactNode): child is ReactElement {\n  return isValidElement(child) && child.type === Slottable\n}\n\nconst pressMap = isWeb\n  ? {\n      onPress: 'onClick',\n      onPressOut: 'onMouseUp',\n      onPressIn: 'onMouseDown',\n    }\n  : {}\n\nfunction mergeSlotProps(child: any, slotProps: AnyProps) {\n  const childProps = child.props\n\n  // all child props should override\n  const overrideProps = { ...childProps }\n  const isHTMLChild = typeof child.type === 'string'\n\n  if (isHTMLChild) {\n    for (const key in pressMap) {\n      if (key in slotProps) {\n        slotProps[pressMap[key]] = slotProps[key]\n        delete slotProps[key]\n      }\n    }\n  }\n\n  for (let propName in childProps) {\n    const slotPropValue = slotProps[propName]\n    const childPropValue = childProps[propName]\n\n    if (isHTMLChild && pressMap[propName]) {\n      propName = pressMap[propName]\n      delete overrideProps[propName]\n    }\n\n    const isHandler = handleRegex.test(propName)\n    // if it's a handler, modify the override by composing the base handler\n    if (isHandler) {\n      overrideProps[propName] = mergeEvent(childPropValue, slotPropValue)\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n    }\n  }\n\n  return { ...slotProps, ...overrideProps }\n}\n\nconst handleRegex = /^on[A-Z]/\n\nexport function mergeEvent(a?: Function, b?: Function) {\n  return (...args: unknown[]) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],
+  "mappings": "AAmCM,SA4CG,UA5CH;AAjCN,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,UAAmC,cAAc,YAAY,sBAAsB;AAUrF,MAAM,OAAO,WAAmC,CAAC,OAAO,iBAAiB;AAC9E,QAAM,EAAE,aAAa,UAAU,IAAI;AACnC,QAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAC/C,QAAM,YAAY,cAAc,KAAK,WAAW;AAEhD,MAAI,WAAW;AAEb,UAAM,aAAa,UAAU,MAAM;AAEnC,UAAM,cAAc,cAAc,IAAI,CAAC,UAAU;AAC/C,UAAI,UAAU,WAAW;AAGvB,YAAI,SAAS,MAAM,UAAU,IAAI;AAAG,iBAAO,SAAS,KAAK,IAAI;AAC7D,eAAO,eAAe,UAAU,IAAK,WAAW,MAAM,WAAyB;AAAA,MACjF,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,WACE,oBAAC;AAAA,MAAW,GAAG;AAAA,MAAW,KAAK;AAAA,MAC5B,yBAAe,UAAU,IAAI,aAAa,YAAY,QAAW,WAAW,IAAI;AAAA,KACnF;AAAA,EAEJ;AAEA,SACE,oBAAC;AAAA,IAAW,GAAG;AAAA,IAAW,KAAK;AAAA,IAC5B;AAAA,GACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,MAAM,YAAY,WAAgC,CAAC,OAAO,iBAAiB;AACzE,QAAM,EAAE,aAAa,UAAU,IAAI;AAEnC,MAAI,eAAe,QAAQ,GAAG;AAC5B,UAAM,aAAa;AAAA,MACjB,GAAG,eAAe,UAAU,SAAS;AAAA,MACrC,KAAK,YAAY,cAAe,SAAiB,GAAG;AAAA,IACtD;AACA,WAAO,aAAa,UAAU,UAAU;AAAA,EAC1C;AAEA,SAAO,SAAS,MAAM,QAAQ,IAAI,IAAI,SAAS,KAAK,IAAI,IAAI;AAC9D,CAAC;AAED,UAAU,cAAc;AAMjB,MAAM,YAAY,CAAC,EAAE,SAAS,MAA+B;AAClE,SAAO;AAAA,IAAG;AAAA,GAAS;AACrB;AAMA,SAAS,YAAY,OAAyC;AAC5D,SAAO,eAAe,KAAK,KAAK,MAAM,SAAS;AACjD;AAEA,MAAM,WAAW,QACb;AAAA,EACE,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AACb,IACA,CAAC;AAEL,SAAS,eAAe,OAAY,WAAqB;AACvD,QAAM,aAAa,MAAM;AAGzB,QAAM,gBAAgB,EAAE,GAAG,WAAW;AACtC,QAAM,cAAc,OAAO,MAAM,SAAS;AAE1C,MAAI,aAAa;AACf,eAAW,OAAO,UAAU;AAC1B,UAAI,OAAO,WAAW;AACpB,kBAAU,SAAS,QAAQ,UAAU;AACrC,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAEA,WAAS,YAAY,YAAY;AAC/B,UAAM,gBAAgB,UAAU;AAChC,UAAM,iBAAiB,WAAW;AAElC,QAAI,eAAe,SAAS,WAAW;AACrC,iBAAW,SAAS;AACpB,aAAO,cAAc;AAAA,IACvB;AAEA,UAAM,YAAY,YAAY,KAAK,QAAQ;AAE3C,QAAI,WAAW;AACb,oBAAc,YAAY,WAAW,gBAAgB,aAAa;AAAA,IACpE,WAES,aAAa,SAAS;AAC7B,oBAAc,YAAY,EAAE,GAAG,eAAe,GAAG,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,YAAY,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,WAAW,GAAG,cAAc;AAC1C;AAEA,MAAM,cAAc;AAEb,SAAS,WAAW,GAAc,GAAc;AACrD,SAAO,IAAI,SAAoB;AAC7B,2BAAI,GAAG;AACP,2BAAI,GAAG;AAAA,EACT;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.190",
+  "version": "1.0.1-beta.191",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,24 +28,25 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.190",
-    "@tamagui/constants": "^1.0.1-beta.190",
-    "@tamagui/helpers": "^1.0.1-beta.190",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.190",
-    "@tamagui/rnw": "^1.0.1-beta.190",
-    "@tamagui/rnw-lite": "^1.0.1-beta.190",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.190",
-    "@tamagui/use-event": "^1.0.1-beta.190",
-    "@tamagui/use-force-update": "^1.0.1-beta.190",
+    "@tamagui/compose-refs": "^1.0.1-beta.191",
+    "@tamagui/constants": "^1.0.1-beta.191",
+    "@tamagui/helpers": "^1.0.1-beta.191",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.191",
+    "@tamagui/rnw": "^1.0.1-beta.191",
+    "@tamagui/rnw-lite": "^1.0.1-beta.191",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.191",
+    "@tamagui/use-event": "^1.0.1-beta.191",
+    "@tamagui/use-force-update": "^1.0.1-beta.191",
     "expo-screen-orientation": "^4.3.0",
-    "hyphenate-style-name": "^1.0.4"
+    "hyphenate-style-name": "^1.0.4",
+    "ts-toolbelt": "^9.6.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.190",
+    "@tamagui/build": "^1.0.1-beta.191",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "csstype": "^3.0.10",

package/src/addTheme.ts

@@ -39,6 +39,7 @@ export function addTheme({
   if (isWeb) {
     if (insertCSS) {
       cssRules = getThemeCSSRules({
+        // @ts-ignore this works but should be fixed types
         config,
         themeName,
         names: [themeName],

package/src/createComponent.tsx

@@ -895,6 +895,7 @@ export function createComponent<
             [pressKey]: attachPress
               ? (e) => {
                   unPress()
+                  // @ts-ignore
                   onClick?.(e)
                   onPress?.(e)
                 }
@@ -1419,12 +1420,13 @@ type CreateSpacerProps = SpacedChildrenProps & { key: string }
 
 function createSpacer({ key, direction, space, spaceFlex }: CreateSpacerProps) {
   return (
+    // @ts-ignore this one blew up but the types seem better
     <Spacer
       key={key}
       size={space}
       direction={direction}
-      {...(spaceFlex && {
-        flex: spaceFlex,
+      {...(typeof spaceFlex !== 'undefined' && {
+        flex: spaceFlex === true ? 1 : spaceFlex === false ? 0 : spaceFlex,
       })}
     />
   )

package/src/createShorthands.ts

@@ -1,5 +1,7 @@
-// type helper
+import { CreateShorthands } from './types'
 
-export function createShorthands<A extends Record<string, string>>(shorthands: A): A {
+// just a type helper util
+
+export function createShorthands<A extends CreateShorthands>(shorthands: A): A {
   return Object.freeze(shorthands) as any
 }

package/src/helpers/createPropMapper.ts

@@ -343,8 +343,11 @@ const resolveTokensAndVariants: StyleResolver = (
       }
     }
     if (process.env.NODE_ENV === 'development') {
-      if (res[fKey]?.[0] === '$') {
-        console.warn(`⚠️ Missing token in theme ${theme.name}:`, fKey, res[fKey])
+      if (debug) {
+        if (res[fKey]?.[0] === '$') {
+          // eslint-disable-next-line no-console
+          console.warn(`⚠️ Missing token in theme ${theme.name}:`, fKey, res[fKey], theme)
+        }
       }
     }
   }

package/src/helpers/expandStyles.ts

@@ -1,6 +1,7 @@
 import { isWeb } from '@tamagui/constants'
 
 import { getConfig } from '../config'
+import { CreateShorthands } from '../types'
 import { expandStyle } from './expandStyle'
 import { colorToRGBA, normalizeColor } from './normalizeColor'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'

package/src/helpers/insertStyleRule.tsx

@@ -2,7 +2,7 @@
 // this should avoid re-inserts, but need to test the perf trade-offs
 // i tested with the site itself and the initial insert was trivial
 
-import { StyleObject } from '@tamagui/helpers'
+import type { StyleObject } from '@tamagui/helpers'
 
 const allSelectors = {}
 const allRules = {}
@@ -17,17 +17,16 @@ function addTransform(identifier: string, css: string, rule?: CSSRule) {
   const s = css.indexOf('transform:')
   if (s === -1) {
     if (process.env.NODE_ENV === 'development') {
-      // sometimes getting empty style rules from webpack... :/ only in dev
-      if (css.indexOf('{ }')) {
-        console.log('wah wah')
-        return false
-      }
+      // eslint-disable-next-line no-console
       console.groupCollapsed(`❌ Invalid transform, likely used deg/% improperly ${identifier}`)
+      // eslint-disable-next-line no-console
       console.log('rule:', rule)
+      // eslint-disable-next-line no-console
       console.trace()
+      // eslint-disable-next-line no-console
       console.groupEnd()
     } else {
-      console.warn(`Missing transform`, identifier, css, rule)
+      // missing transform
     }
     return false
   }
@@ -95,11 +94,12 @@ export function updateInserted() {
 
 function getTamaguiSelector(rule: CSSRule | null): readonly [string, CSSStyleRule] | null {
   if (rule instanceof CSSStyleRule) {
-    if (rule.selectorText.startsWith('._')) {
-      return [rule.selectorText.slice(1), rule]
+    const text = rule.selectorText
+    if (text.startsWith('._')) {
+      return [text.slice(1), rule]
     }
-    if (rule.selectorText.startsWith(':root') && rule.selectorText.includes('._')) {
-      return [getIdentifierFromTamaguiSelector(rule.selectorText), rule]
+    if (text.startsWith(':root') && text.includes('._')) {
+      return [getIdentifierFromTamaguiSelector(text), rule]
     }
   } else if (rule instanceof CSSMediaRule) {
     // tamagui only ever inserts 1 rule per media

package/src/types.tsx

@@ -28,9 +28,8 @@ export type TamaguiElement = HTMLElement | View
 
 export type DebugProp = boolean | 'break' | 'verbose'
 
-//
 // base props that are accepted by createComponent (additional to react-native-web)
-//
+
 export type TamaguiComponentPropsBase = {
   hitSlop?: PressableProps['hitSlop']
   asChild?: boolean
@@ -49,6 +48,9 @@ export type TamaguiComponentPropsBase = {
   tag?: string
   theme?: ThemeName | null
   componentName?: string
+  /**
+   * Forces the pseudo style state to be on
+   */
   forceStyle?: 'hover' | 'press' | 'focus'
   onHoverIn?: (e: MouseEvent) => any
   onHoverOut?: (e: MouseEvent) => any
@@ -59,9 +61,6 @@ export type TamaguiComponentPropsBase = {
   onMouseEnter?: (e: MouseEvent) => any
   onMouseLeave?: (e: MouseEvent) => any
   onMouseDown?: (e: MouseEvent) => any
-  // WEB STYLES
-  userSelect?: Properties['userSelect']
-  cursor?: Properties['cursor']
 }
 
 export type ReactComponentWithRef<Props, Ref> = React.ForwardRefExoticComponent<
@@ -116,7 +115,13 @@ type GenericThemes = {
       }
 }
 
-type GenericShorthands = {}
+type AllStyleKeys = keyof StackStylePropsBase | keyof TextStylePropsBase
+
+export type CreateShorthands = {
+  [key: string]: AllStyleKeys
+}
+
+export type GenericShorthands = {}
 
 // sm: { minWidth: 100 }
 type GenericMedia = {
@@ -256,14 +261,21 @@ type ArrayIntersection<A extends any[]> = A[keyof A]
 
 type GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S
 
-export type SpacerProps = Omit<StackProps, 'flex' | 'direction' | 'size'> & {
+type SpacerPropsBase = {
   size?: number | SpaceTokens | null
   flex?: boolean | number
   direction?: SpaceDirection
 }
+type SpacerOwnProps = SpacerPropsBase &
+  //
+  WithThemeShorthandsPseudosMediaAnimation<SpacerPropsBase>
+
+export type SpacerProps = Omit<StackProps, 'flex' | 'direction' | 'size'> &
+  //
+  SpacerOwnProps
 
 export type CreateTamaguiProps = {
-  shorthands?: GenericTamaguiConfig['shorthands']
+  shorthands?: CreateShorthands
   media?: GenericTamaguiConfig['media']
   animations?: AnimationDriver<any>
   fonts: GenericTamaguiConfig['fonts']
@@ -574,46 +586,30 @@ type WithThemeShorthandsAndPseudos<A extends object> =
 type WithThemeShorthandsPseudosMediaAnimation<A extends object> = WithThemeShorthandsAndPseudos<A> &
   MediaProps<WithThemeShorthandsAndPseudos<A>>
 
-//
-// Stack
-//
+/**
+ * Base style-only props (no media, pseudo):
+ */
 
-type WebOnlyStyleProps = {
+type StylePropsWebOnly = {
+  // we make this a style prop as it is on web
+  pointerEvents?: ViewProps['pointerEvents']
   // WEB ONLY
-  cursor?: string
+  cursor?: Properties['cursor']
   // WEB ONLY
-  contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'paint' | string
+  contain?: Properties['contain']
   // WEB ONLY values: inherit, inline, block, content
   display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'
-  // WEB ONLY pointerEvents can be a style prop
-  pointerEvents?: ViewProps['pointerEvents']
+  // WEB ONLY
+  userSelect?: Properties['userSelect']
 }
 
 export type StackStylePropsBase = Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &
   TransformStyleProps &
-  WebOnlyStyleProps
-
-export type StackPropsBaseShared = Omit<ViewProps, 'display' | 'children'> &
-  RNWViewProps &
-  TamaguiComponentPropsBase
-
-export type StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>
-export type StackPropsBase = StackPropsBaseShared & WithThemeAndShorthands<StackStylePropsBase>
-export type StackProps = StackPropsBaseShared & StackStyleProps
-
-export type GestureReponderEvent = Exclude<View['props']['onResponderMove'], void> extends (
-  event: infer Event
-) => void
-  ? Event
-  : never
-
-//
-// Text props
-//
+  StylePropsWebOnly
 
 export type TextStylePropsBase = Omit<TextStyle, 'display' | 'backfaceVisibility'> &
   TransformStyleProps &
-  WebOnlyStyleProps & {
+  StylePropsWebOnly & {
     ellipse?: boolean
     selectable?: boolean
     textDecorationDistance?: number
@@ -622,12 +618,29 @@ export type TextStylePropsBase = Omit<TextStyle, 'display' | 'backfaceVisibility
     wordWrap?: Properties['wordWrap']
   }
 
-export type TextPropsBaseShared = Omit<ReactTextProps, 'children'> &
+//
+// Stack
+//
+
+export type StackNonStyleProps = Omit<ViewProps, 'display' | 'children'> &
+  RNWViewProps &
+  TamaguiComponentPropsBase
+
+export type StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>
+export type StackPropsBase = StackNonStyleProps & WithThemeAndShorthands<StackStylePropsBase>
+export type StackProps = StackNonStyleProps & StackStyleProps
+
+//
+// Text props
+//
+
+export type TextNonStyleProps = Omit<ReactTextProps, 'children'> &
   RNWTextProps &
   TamaguiComponentPropsBase
-export type TextPropsBase = TextPropsBaseShared & WithThemeAndShorthands<TextStylePropsBase>
+
+export type TextPropsBase = TextNonStyleProps & WithThemeAndShorthands<TextStylePropsBase>
 export type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>
-export type TextProps = TextPropsBaseShared & TextStyleProps
+export type TextProps = TextNonStyleProps & TextStyleProps
 
 // could actually infer from parent
 export type ViewOrTextProps = WithThemeShorthandsPseudosMediaAnimation<
@@ -1305,3 +1318,9 @@ export type UseAnimationHook = (
 ) => null | {
   style?: StackStylePropsBase | StackStylePropsBase[]
 }
+
+export type GestureReponderEvent = Exclude<View['props']['onResponderMove'], void> extends (
+  event: infer Event
+) => void
+  ? Event
+  : never

package/src/views/Slot.tsx

@@ -2,33 +2,31 @@
 
 import { composeRefs } from '@tamagui/compose-refs'
 import { isWeb } from '@tamagui/constants'
-import * as React from 'react'
+import { Children, ReactElement, ReactNode, cloneElement, forwardRef, isValidElement } from 'react'
 
 /* -------------------------------------------------------------------------------------------------
  * Slot
  * -----------------------------------------------------------------------------------------------*/
 
 export type SlotProps = {
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
-export const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
+export const Slot = forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
   const { children, ...slotProps } = props
-  const childrenArray = React.Children.toArray(children)
+  const childrenArray = Children.toArray(children)
   const slottable = childrenArray.find(isSlottable)
 
   if (slottable) {
     // the new element to render is the one passed as a child of `Slottable`
-    const newElement = slottable.props.children as React.ReactNode
+    const newElement = slottable.props.children as ReactNode
 
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
         // because the new element will be the one rendered, we are only interested
         // in grabbing its children (`newElement.props.children`)
-        if (React.Children.count(newElement) > 1) return React.Children.only(null)
-        return React.isValidElement(newElement)
-          ? (newElement.props.children as React.ReactNode)
-          : null
+        if (Children.count(newElement) > 1) return Children.only(null)
+        return isValidElement(newElement) ? (newElement.props.children as ReactNode) : null
       } else {
         return child
       }
@@ -36,9 +34,7 @@ export const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRe
 
     return (
       <SlotClone {...slotProps} ref={forwardedRef}>
-        {React.isValidElement(newElement)
-          ? React.cloneElement(newElement, undefined, newChildren)
-          : null}
+        {isValidElement(newElement) ? cloneElement(newElement, undefined, newChildren) : null}
       </SlotClone>
     )
   }
@@ -57,21 +53,21 @@ Slot.displayName = 'Slot'
  * -----------------------------------------------------------------------------------------------*/
 
 interface SlotCloneProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
-const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
+const SlotClone = forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
   const { children, ...slotProps } = props
 
-  if (React.isValidElement(children)) {
+  if (isValidElement(children)) {
     const childProps = {
       ...mergeSlotProps(children, slotProps),
       ref: composeRefs(forwardedRef, (children as any).ref),
     }
-    return React.cloneElement(children, childProps)
+    return cloneElement(children, childProps)
   }
 
-  return React.Children.count(children) > 1 ? React.Children.only(null) : null
+  return Children.count(children) > 1 ? Children.only(null) : null
 })
 
 SlotClone.displayName = 'SlotClone'
@@ -80,7 +76,7 @@ SlotClone.displayName = 'SlotClone'
  * Slottable
  * -----------------------------------------------------------------------------------------------*/
 
-export const Slottable = ({ children }: { children: React.ReactNode }) => {
+export const Slottable = ({ children }: { children: ReactNode }) => {
   return <>{children}</>
 }
 
@@ -88,8 +84,8 @@ export const Slottable = ({ children }: { children: React.ReactNode }) => {
 
 type AnyProps = Record<string, any>
 
-function isSlottable(child: React.ReactNode): child is React.ReactElement {
-  return React.isValidElement(child) && child.type === Slottable
+function isSlottable(child: ReactNode): child is ReactElement {
+  return isValidElement(child) && child.type === Slottable
 }
 
 const pressMap = isWeb

package/types/Tamagui.d.ts

@@ -7,7 +7,7 @@ declare class TamaguiManager {
         [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
             [key: string]: import("./types").VariableVal;
         };
-    }, {}, {
+    }, import("./types").GenericShorthands, {
         [key: string]: {
             [key: string]: string | number;
         };

package/types/config.d.ts

@@ -6,7 +6,7 @@ export declare const getConfig: () => TamaguiInternalConfig<import("./types").Cr
     [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
         [key: string]: import("./types").VariableVal;
     };
-}, {}, {
+}, import("./types").GenericShorthands, {
     [key: string]: {
         [key: string]: string | number;
     };

package/types/createShorthands.d.ts

@@ -1,2 +1,3 @@
-export declare function createShorthands<A extends Record<string, string>>(shorthands: A): A;
+import { CreateShorthands } from './types';
+export declare function createShorthands<A extends CreateShorthands>(shorthands: A): A;
 //# sourceMappingURL=createShorthands.d.ts.map

package/types/helpers/expandStyles.d.ts

@@ -9,11 +9,11 @@ export declare const defaultOffset: {
  *   2. Normalizes various inconsistent styles to be more consistent
  *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight
  */
-export declare function expandStyles(style: Record<string, any>, config?: import("..").TamaguiInternalConfig<import("..").CreateTokens<import("..").VariableVal>, {
-    [key: string]: Partial<import("..").TamaguiBaseTheme> & {
-        [key: string]: import("..").VariableVal;
+export declare function expandStyles(style: Record<string, any>, config?: import("../types").TamaguiInternalConfig<import("../types").CreateTokens<import("../types").VariableVal>, {
+    [key: string]: Partial<import("../types").TamaguiBaseTheme> & {
+        [key: string]: import("../types").VariableVal;
     };
-}, {}, {
+}, import("../types").GenericShorthands, {
     [key: string]: {
         [key: string]: string | number;
     };
@@ -21,6 +21,6 @@ export declare function expandStyles(style: Record<string, any>, config?: import
     [key: string]: string | any[] | {
         [key: string]: any;
     };
-}, import("..").GenericFonts>): Record<string, any>;
+}, import("../types").GenericFonts>): Record<string, any>;
 export declare function fixStyles(style: Record<string, any>): void;
 //# sourceMappingURL=expandStyles.d.ts.map

package/types/helpers/insertStyleRule.d.ts

@@ -1,4 +1,4 @@
-import { StyleObject } from '@tamagui/helpers';
+import type { StyleObject } from '@tamagui/helpers';
 export declare const insertedTransforms: {};
 export declare const getAllSelectors: () => {};
 export declare const getAllRules: () => unknown[];