first implementation of tamagui mobile pages

.tamagui/tamaguistacks-components.config.cjs

@@ -0,0 +1,354 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// node_modules/@tamagui/stacks/dist/esm/index.mjs
+var esm_exports = {};
+__export(esm_exports, {
+  ButtonNestingContext: () => ButtonNestingContext,
+  SizableStack: () => SizableStack,
+  ThemeableStack: () => ThemeableStack,
+  XStack: () => XStack,
+  YStack: () => YStack,
+  ZStack: () => ZStack,
+  fullscreenStyle: () => fullscreenStyle,
+  themeableVariants: () => themeableVariants
+});
+module.exports = __toCommonJS(esm_exports);
+
+// node_modules/@tamagui/stacks/dist/esm/Stacks.mjs
+var import_core2 = require("@tamagui/core");
+
+// node_modules/@tamagui/stacks/dist/esm/getElevation.mjs
+var import_core = require("@tamagui/core");
+var getElevation = /* @__PURE__ */ __name((size, extras) => {
+  if (!size) return;
+  const {
+    tokens
+  } = extras, token = tokens.size[size], sizeNum = (0, import_core.isVariable)(token) ? +token.val : size;
+  return getSizedElevation(sizeNum, extras);
+}, "getElevation");
+var getSizedElevation = /* @__PURE__ */ __name((val, {
+  theme,
+  tokens
+}) => {
+  let num = 0;
+  if (val === true) {
+    const val2 = (0, import_core.getVariableValue)(tokens.size.true);
+    typeof val2 == "number" ? num = val2 : num = 10;
+  } else num = +val;
+  if (num === 0) return;
+  const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)];
+  return {
+    shadowColor: theme.shadowColor,
+    shadowRadius,
+    shadowOffset: {
+      height,
+      width: 0
+    },
+    ...import_core.isAndroid ? {
+      elevationAndroid: 2 * height
+    } : {}
+  };
+}, "getSizedElevation");
+
+// node_modules/@tamagui/stacks/dist/esm/Stacks.mjs
+var fullscreenStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+var getInset = /* @__PURE__ */ __name((val) => val && typeof val == "object" ? val : {
+  top: val,
+  left: val,
+  bottom: val,
+  right: val
+}, "getInset");
+var variants = {
+  fullscreen: {
+    true: fullscreenStyle
+  },
+  elevation: {
+    "...size": getElevation,
+    ":number": getElevation
+  },
+  inset: getInset
+};
+var YStack = (0, import_core2.styled)(import_core2.View, {
+  flexDirection: "column",
+  variants
+});
+YStack.displayName = "YStack";
+var XStack = (0, import_core2.styled)(import_core2.View, {
+  flexDirection: "row",
+  variants
+});
+XStack.displayName = "XStack";
+var ZStack = (0, import_core2.styled)(YStack, {
+  position: "relative"
+}, {
+  neverFlatten: true,
+  isZStack: true
+});
+ZStack.displayName = "ZStack";
+
+// node_modules/@tamagui/stacks/dist/esm/SizableStack.mjs
+var import_core3 = require("@tamagui/core");
+
+// node_modules/@tamagui/get-token/dist/esm/index.mjs
+var import_web = require("@tamagui/core");
+var defaultOptions = {
+  shift: 0,
+  bounds: [0]
+};
+var getSpace = /* @__PURE__ */ __name((space, options) => getTokenRelative("space", space, options), "getSpace");
+var cacheVariables = {};
+var cacheWholeVariables = {};
+var cacheKeys = {};
+var cacheWholeKeys = {};
+var stepTokenUpOrDown = /* @__PURE__ */ __name((type, current, options = defaultOptions) => {
+  const tokens = (0, import_web.getTokens)({
+    prefixed: true
+  })[type];
+  if (!(type in cacheVariables)) {
+    cacheKeys[type] = [], cacheVariables[type] = [], cacheWholeKeys[type] = [], cacheWholeVariables[type] = [];
+    const sorted = Object.keys(tokens).map((k) => tokens[k]).sort((a, b) => a.val - b.val);
+    for (const token of sorted) cacheKeys[type].push(token.key), cacheVariables[type].push(token);
+    const sortedExcludingHalfSteps = sorted.filter((x) => !x.key.endsWith(".5"));
+    for (const token of sortedExcludingHalfSteps) cacheWholeKeys[type].push(token.key), cacheWholeVariables[type].push(token);
+  }
+  const isString = typeof current == "string", tokensOrdered = (options.excludeHalfSteps ? isString ? cacheWholeKeys : cacheWholeVariables : isString ? cacheKeys : cacheVariables)[type], min = options.bounds?.[0] ?? 0, max = options.bounds?.[1] ?? tokensOrdered.length - 1, currentIndex = tokensOrdered.indexOf(current);
+  let shift = options.shift || 0;
+  shift && (current === "$true" || (0, import_web.isVariable)(current) && current.name === "true") && (shift += shift > 0 ? 1 : -1);
+  const index = Math.min(max, Math.max(min, currentIndex + shift)), found = tokensOrdered[index];
+  return (typeof found == "string" ? tokens[found] : found) || tokens.$true;
+}, "stepTokenUpOrDown");
+var getTokenRelative = stepTokenUpOrDown;
+
+// node_modules/@tamagui/get-button-sized/dist/esm/index.mjs
+var getButtonSized = /* @__PURE__ */ __name((val, {
+  tokens,
+  props
+}) => {
+  if (!val || props.circular) return;
+  if (typeof val == "number") return {
+    paddingHorizontal: val * 0.25,
+    height: val,
+    borderRadius: props.circular ? 1e5 : val * 0.2
+  };
+  const xSize = getSpace(val), radiusToken = tokens.radius[val] ?? tokens.radius.$true;
+  return {
+    paddingHorizontal: xSize,
+    height: val,
+    borderRadius: props.circular ? 1e5 : radiusToken
+  };
+}, "getButtonSized");
+
+// node_modules/@tamagui/stacks/dist/esm/variants.mjs
+var elevate = {
+  true: /* @__PURE__ */ __name((_, extras) => getElevation(extras.props.size, extras), "true")
+};
+var bordered = /* @__PURE__ */ __name((val, {
+  props
+}) => ({
+  // TODO size it with size in '...size'
+  borderWidth: typeof val == "number" ? val : 1,
+  borderColor: "$borderColor",
+  ...props.hoverTheme && {
+    hoverStyle: {
+      borderColor: "$borderColorHover"
+    }
+  },
+  ...props.pressTheme && {
+    pressStyle: {
+      borderColor: "$borderColorPress"
+    }
+  },
+  ...props.focusTheme && {
+    focusStyle: {
+      borderColor: "$borderColorFocus"
+    }
+  }
+}), "bordered");
+var padded = {
+  true: /* @__PURE__ */ __name((_, extras) => {
+    const {
+      tokens,
+      props
+    } = extras;
+    return {
+      padding: tokens.space[props.size] || tokens.space.$true
+    };
+  }, "true")
+};
+var radiused = {
+  true: /* @__PURE__ */ __name((_, extras) => {
+    const {
+      tokens,
+      props
+    } = extras;
+    return {
+      borderRadius: tokens.radius[props.size] || tokens.radius.$true
+    };
+  }, "true")
+};
+var circularStyle = {
+  borderRadius: 1e5,
+  padding: 0
+};
+var circular = {
+  true: /* @__PURE__ */ __name((_, {
+    props,
+    tokens
+  }) => {
+    if (!("size" in props)) return circularStyle;
+    const size = typeof props.size == "number" ? props.size : tokens.size[props.size];
+    return {
+      ...circularStyle,
+      width: size,
+      height: size,
+      maxWidth: size,
+      maxHeight: size,
+      minWidth: size,
+      minHeight: size
+    };
+  }, "true")
+};
+var hoverTheme = {
+  true: {
+    hoverStyle: {
+      backgroundColor: "$backgroundHover",
+      borderColor: "$borderColorHover"
+    }
+  },
+  false: {}
+};
+var pressTheme = {
+  true: {
+    cursor: "pointer",
+    pressStyle: {
+      backgroundColor: "$backgroundPress",
+      borderColor: "$borderColorPress"
+    }
+  },
+  false: {}
+};
+var focusTheme = {
+  true: {
+    focusStyle: {
+      backgroundColor: "$backgroundFocus",
+      borderColor: "$borderColorFocus"
+    }
+  },
+  false: {}
+};
+
+// node_modules/@tamagui/stacks/dist/esm/SizableStack.mjs
+var SizableStack = (0, import_core3.styled)(XStack, {
+  name: "SizableStack",
+  variants: {
+    unstyled: {
+      true: {
+        hoverTheme: false,
+        pressTheme: false,
+        focusTheme: false,
+        elevate: false,
+        bordered: false
+      }
+    },
+    hoverTheme,
+    pressTheme,
+    focusTheme,
+    circular,
+    elevate,
+    bordered,
+    size: {
+      "...size": /* @__PURE__ */ __name((val, extras) => getButtonSized(val, extras), "...size")
+    }
+  }
+});
+
+// node_modules/@tamagui/stacks/dist/esm/ThemeableStack.mjs
+var import_core4 = require("@tamagui/core");
+var chromelessStyle = {
+  backgroundColor: "transparent",
+  borderColor: "transparent",
+  shadowColor: "transparent",
+  hoverStyle: {
+    borderColor: "transparent"
+  }
+};
+var themeableVariants = {
+  backgrounded: {
+    true: {
+      backgroundColor: "$background"
+    }
+  },
+  radiused,
+  hoverTheme,
+  pressTheme,
+  focusTheme,
+  circular,
+  padded,
+  elevate,
+  bordered,
+  transparent: {
+    true: {
+      backgroundColor: "transparent"
+    }
+  },
+  chromeless: {
+    true: chromelessStyle,
+    all: {
+      ...chromelessStyle,
+      hoverStyle: chromelessStyle,
+      pressStyle: chromelessStyle,
+      focusStyle: chromelessStyle
+    }
+  }
+};
+var ThemeableStack = (0, import_core4.styled)(YStack, {
+  variants: themeableVariants
+});
+
+// node_modules/@tamagui/stacks/dist/esm/NestingContext.mjs
+var import_react = __toESM(require("react"), 1);
+var ButtonNestingContext = import_react.default.createContext(false);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ButtonNestingContext,
+  SizableStack,
+  ThemeableStack,
+  XStack,
+  YStack,
+  ZStack,
+  fullscreenStyle,
+  themeableVariants
+});

.tamagui/tamaguitext-components.config.cjs

@@ -0,0 +1,271 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// node_modules/@tamagui/text/dist/esm/index.mjs
+var esm_exports = {};
+__export(esm_exports, {
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  H5: () => H5,
+  H6: () => H6,
+  Heading: () => Heading,
+  Paragraph: () => Paragraph,
+  SizableText: () => SizableText2,
+  wrapChildrenInText: () => wrapChildrenInText
+});
+module.exports = __toCommonJS(esm_exports);
+
+// node_modules/@tamagui/constants/dist/esm/constants.mjs
+var import_react = __toESM(require("react"), 1);
+var IS_REACT_19 = typeof import_react.default.use < "u";
+var isWeb = true;
+var isWindowDefined = typeof window < "u";
+var isClient = isWeb && isWindowDefined;
+var isChrome = typeof navigator < "u" && /Chrome/.test(navigator.userAgent || "");
+var isWebTouchable = isClient && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+var isIos = process.env.TEST_NATIVE_PLATFORM === "ios";
+
+// node_modules/@tamagui/get-font-sized/dist/esm/index.mjs
+var import_web = require("@tamagui/core");
+var getFontSized = /* @__PURE__ */ __name((sizeTokenIn = "$true", {
+  font,
+  fontFamily,
+  props
+}) => {
+  if (!font) return {
+    fontSize: sizeTokenIn
+  };
+  const sizeToken = sizeTokenIn === "$true" ? getDefaultSizeToken(font) : sizeTokenIn, style = {}, fontSize = font.size[sizeToken], lineHeight = font.lineHeight?.[sizeToken], fontWeight = font.weight?.[sizeToken], letterSpacing = font.letterSpacing?.[sizeToken], textTransform = font.transform?.[sizeToken], fontStyle = props.fontStyle ?? font.style?.[sizeToken], color = props.color ?? font.color?.[sizeToken];
+  return fontStyle && (style.fontStyle = fontStyle), textTransform && (style.textTransform = textTransform), fontFamily && (style.fontFamily = fontFamily), fontWeight && (style.fontWeight = fontWeight), letterSpacing && (style.letterSpacing = letterSpacing), fontSize && (style.fontSize = fontSize), lineHeight && (style.lineHeight = lineHeight), color && (style.color = color), process.env.NODE_ENV === "development" && props.debug && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} getFontSized", sizeTokenIn, sizeToken), isClient && console.info({
+    style,
+    props,
+    font
+  }), console.groupEnd()), style;
+}, "getFontSized");
+var SizableText = (0, import_web.styled)(import_web.Text, {
+  name: "SizableText",
+  fontFamily: "$body",
+  variants: {
+    size: {
+      "...fontSize": getFontSized
+    }
+  },
+  defaultVariants: {
+    size: "$true"
+  }
+});
+var cache = /* @__PURE__ */ new WeakMap();
+function getDefaultSizeToken(font) {
+  if (typeof font == "object" && cache.has(font)) return cache.get(font);
+  const sizeTokens = "$true" in font.size ? font.size : (0, import_web.getTokens)().size, sizeDefault = sizeTokens.$true, sizeDefaultSpecific = sizeDefault ? Object.keys(sizeTokens).find((x) => x !== "$true" && sizeTokens[x].val === sizeDefault.val) : null;
+  return !sizeDefault || !sizeDefaultSpecific ? (process.env.NODE_ENV === "development" && console.warn(`No default size is set in your tokens for the "true" key, fonts will be inconsistent.
+
+      Fix this by having consistent tokens across fonts and sizes and setting a true key for your size tokens, or
+      set true keys for all your font tokens: "size", "lineHeight", "fontStyle", etc.`), Object.keys(font.size)[3]) : (cache.set(font, sizeDefaultSpecific), sizeDefaultSpecific);
+}
+__name(getDefaultSizeToken, "getDefaultSizeToken");
+
+// node_modules/@tamagui/text/dist/esm/SizableText.mjs
+var import_web2 = require("@tamagui/core");
+var SizableText2 = (0, import_web2.styled)(import_web2.Text, {
+  name: "SizableText",
+  fontFamily: "$body",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        color: "$color"
+      }
+    },
+    size: getFontSized
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+SizableText2.staticConfig.variants.fontFamily = {
+  "...": /* @__PURE__ */ __name((_val, extras) => {
+    const sizeProp = extras.props.size, fontSizeProp = extras.props.fontSize, size = sizeProp === "$true" && fontSizeProp ? fontSizeProp : extras.props.size || "$true";
+    return getFontSized(size, extras);
+  }, "...")
+};
+
+// node_modules/@tamagui/text/dist/esm/Paragraph.mjs
+var import_web3 = require("@tamagui/core");
+var Paragraph = (0, import_web3.styled)(SizableText2, {
+  name: "Paragraph",
+  tag: "p",
+  userSelect: "auto",
+  color: "$color",
+  size: "$true",
+  whiteSpace: "normal"
+});
+
+// node_modules/@tamagui/text/dist/esm/Headings.mjs
+var import_web4 = require("@tamagui/core");
+var Heading = (0, import_web4.styled)(Paragraph, {
+  tag: "span",
+  name: "Heading",
+  accessibilityRole: "header",
+  fontFamily: "$heading",
+  size: "$8",
+  margin: 0
+});
+var H1 = (0, import_web4.styled)(Heading, {
+  name: "H1",
+  tag: "h1",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$10"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+var H2 = (0, import_web4.styled)(Heading, {
+  name: "H2",
+  tag: "h2",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$9"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+var H3 = (0, import_web4.styled)(Heading, {
+  name: "H3",
+  tag: "h3",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$8"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+var H4 = (0, import_web4.styled)(Heading, {
+  name: "H4",
+  tag: "h4",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$7"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+var H5 = (0, import_web4.styled)(Heading, {
+  name: "H5",
+  tag: "h5",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$6"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+var H6 = (0, import_web4.styled)(Heading, {
+  name: "H6",
+  tag: "h6",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$5"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+
+// node_modules/@tamagui/text/dist/esm/wrapChildrenInText.mjs
+var import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function wrapChildrenInText(TextComponent, propsIn, extraProps) {
+  const {
+    children,
+    textProps,
+    size,
+    noTextWrap,
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    textAlign,
+    fontStyle,
+    maxFontSizeMultiplier
+  } = propsIn;
+  if (noTextWrap || !children) return [children];
+  const props = {
+    ...extraProps
+  };
+  return color && (props.color = color), fontFamily && (props.fontFamily = fontFamily), fontSize && (props.fontSize = fontSize), fontWeight && (props.fontWeight = fontWeight), letterSpacing && (props.letterSpacing = letterSpacing), textAlign && (props.textAlign = textAlign), size && (props.size = size), fontStyle && (props.fontStyle = fontStyle), maxFontSizeMultiplier && (props.maxFontSizeMultiplier = maxFontSizeMultiplier), import_react2.default.Children.toArray(children).map((child, index) => typeof child == "string" ? (
+    // so "data-disable-theme" is a hack to fix themeInverse, don't ask me why
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, {
+      ...props,
+      ...textProps,
+      children: child
+    }, index)
+  ) : child);
+}
+__name(wrapChildrenInText, "wrapChildrenInText");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Heading,
+  Paragraph,
+  SizableText,
+  wrapChildrenInText
+});